热门搜索 :
宠物故事
您的当前位置:首页正文

JS中的回调函数实例浅析

2023-11-30 来源:微宠网

这篇文章主要介绍了JS中的回调函数,结合实例形式简单分析了javascript回调函数的感念、功能、使用方法及相关注意事项,需要的朋友可以参考下

本文实例讲述了JS中的回调函数。分享给大家供大家参考,具体如下:

在说回调函数之前,不妨先看一段代码,相信有点js基础的同学都能明白他的含义:

这段代码其实就是一段事件回调,这样写看的其实相对模糊一些,我们不妨看下接下来的代码

这两段代码的所做的事情其实相同,不同的只是写法的差异,我们看这个addEventListener('eventName',callback)addEventListener这个函数有两个参数,第一个为事件名称,第二个参数实际上就是回掉函数,按照书上来说回调函数的方式,函数中的参数既然可以是变量,那么他也可以是一个函数。可能说到这里大家对回掉函数还是一脸懵逼。我们再看接下来这个例子。

这段代码定义了一个demo函数,这个函数有三个参数a,b,callback,我们在这个函数内部声明了一个局部变量c,然后执行我们的callback(回调函数),接下来执行demo这个函数

这个函数的三个参数如上,在回掉函数中弹出的为3。这就是一个简单的回调函数。而要想真正理解回调函数的意义,其实我觉得还是在于明白他的用途,只有明白他的用途了我们才可以真正的去理解他。

回调函数最多的应用场景就是异步操作,因为异步的操作我们不知道这个操作到底何时结束,那么我们后续执行的代码就无法按照应有的流程走下去。

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

Ajax中的循环方案

在dom4j中使用XPath的简单实例

浅谈Bootstrap的DatePicker日期范围选择

小编还为您整理了以下内容,可能对您也有帮助:

什么是JS回调函数

回调函数就是某个函数执行完毕后执行的函数,没什么的啊。比如:

function(callback){

// 代码

// 以上代码执行完毕后执行回调函数

if(typeof callback === "function"){

callback();

}

}

这是因为js中函数可以当做参数直接传递进去。

js回调函数如何实现异步,给一个例子

异步处理不用阻塞来等待处理完成,而是允许后续操作,直至其程序将处理完成,并回调通知此函数

那么在js中有如下几种异步方式:

示例1

var async=function(callback){

    //read data

    setTimeout(function(){

        callback('data');

    },1000);//1秒后回调

};

//使用

async(function(data){

    alert(data);

});

示例2

var async=function(callback){

    var xhr=new XMLHttpRequest();

    xhr.open('get','.',true);

    

    xhr.onreadystatechange=function(){

        callback(xhr.readyStatus);

    };

    xhr.send();

};

async(function(data){

    alert(data);

});

示例3

var async=function(callback){

    var img=new Image();

    img.onload=img.onerror=function(){

        callback(img);

    };

    img.src='x.jpg';

};

async(function(data){

    alert(data);

});

什么是JavaScript中的回调函数,作用是什么?

一般来说Ajax最大的一个回调函数就是onreadystatechange,这个应该成为事件,每次XMLHttpRequest这个Object在URL请求,状态改变的时候就会触发这个事件。那么你用onreadystatechange=一个函数,这样让你的函数在XMLHttpRequest state change 的时候可以及时捕捉到。当然就不用setTimeout来捕捉啦。所以会方便,在你的回调函数里面可以检测Ajax对象的值,包括返回的请求的HTML,当然只有在readyState=4的时候而且status=200的时候才能用。status就是HTML状态,有200,400,500之类的。

总之,回调函数就是一个自定义的函数,在发生特定的事件的时候调用来处理这个事件的函数。

js 如何写回调函数

把函数作为参数传递就是了。

回调函数可以继续扩展一个函数的功能,非常灵活。

比如:

var PersonInfo = {

name:'Sigma',

age:18

};

function getPersonInfo( next ){

var myInfo = PersonInfo;

next && next( myInfo );

}

getPersonInfo(function( data ){

alert( data.name );

});

微宠网还为您提供以下相关内容希望对您有帮助:

浅析js class

(1)constructor是一个构造函数方法,创建对象时自动调用该方法 (2)constructor是类必须的一个属性,少了他类的创建会报错,如果我们不写的话js会给他自动加上 (3)this指的是实例化对象,就相当于构造函数中的this,指向的是当前创建的对象 (4)类中声明函数不需要function关键字,直接函数名即可 (5)...

浅析libevent

4.基本信息设置完成之后,调用event_add 函数将事件通过Reactor实例也就是struct_base的统一接口找到性能最高的IO复用函数注册到其中,包括设置超时时间。对于定时事件,libevent使用一个小根堆管理,key为超时时间,对于IO和信号事件,将该事件放到等待双向链表中,5.进入无限循环等待就绪事件,以epoll为例,...

jQuery和AngularJS的区别浅析

不要总使用jquery ,甚至不要去引用它,它会阻止你前进,当我们回到这个问题—你知道你怎么在AngularJS中以jquery方式解决问题,但是当你使用诸如$等选择器时,你要想想它们实际上是禁锢了AngularJS,如果你不知道怎么不用jQuery实现,那么去请教别人,一次一次去问,最好的方式是不需要使用jQuery,使用jQuer...

Python类的用法实例浅析

class Test:def __init__(self,msg="hello"):self.wel=msg print "init"def go(self,name,do):print self.wel+"go! "+name+" "+do d=Test("hi,")d.go("naughty","fight")上面的代码演示了:1、构造函数以及带参数(参数有默认值)构造函数 2、构造类实例 3、使用类实例调用类方法 ...

如何在Swift中创建Action扩展浅析

我们Action.js文件中有如下内容:Safari与Action扩展的交互就是通过Action.js文件中的run和finalize这两个方法实现的。当我们在Safari中使用Action扩展时就会调用run方法,它能让我们在该方法中操作当前Safari显示页面的DOM元素。当Action扩展处理完逻辑向Safari返回信息时会调用finalize方法,在我们的例子中,...

ASP.NET中Application全局对象用法实例浅析

2 3 Application.Lock();Application.Set(address,上海);Application.UnLock();在另一个页面取数据:1 2 string s = (string)Application.Get(address);Button1.Text = s;添加一个全局应用程序类 Global.asax,当应用程序第一个页面被访问的时候Application_Start执行。举被很多书举烂了的例子统计访问...

实例浅析焊接应力消除中的拉应力与压应力

特别是在焊接结构中,拉应力与疲劳强度的平衡至关重要。焊接过程中产生的高强度拉应力可能导致焊接部位的早期疲劳破坏,裂纹的增长速度与拉应力成正比。因此,对焊接件进行有效的残余应力消除,如华云科技在某大型项目中的实践,显得尤为关键。华云科技的实际案例 华云科技在一项使用304L奥氏体不锈钢、厚度...

统计学应用于生活的实例?浅析统计学在生活中的应用如下:统计学由于其...

浅析统计学在生活中的应用如下:统计学由于其自身具备的应用特性,所以并不像许多人认为的那样与人们日常生活关系不大。相反,它与我们的日常生活关系密切,在我们身边随处可以见到与统计学知识相关的实例。例如,在我们乘坐高铁、飞机去外地出差或者旅行时,虽然存在发生意外的可能性,但是由于概率很低,所以...

jQuery和AngularJS的区别浅析

某些指令仅仅是装饰我们的视图(例如ngClass),因此有时候直接操作dom是可以的,但是当一个指令类似于一个小物件并且拥有自己的模板,那么它应该当做一个分离的关注点,这就是说,它的模板需要和link中的执行逻辑以及其他controller函数分离开。AngularJS拥有一整套的工具可以是这种分离更简单,使用ngClass...

jQuery和AngularJS的区别浅析

法。所以我一般不推荐AngularJS开发新手同时使用jQuery,至少在他们还没有适应AngularJS的开发模式之前不会去推荐这样做,但是当你真正开始适应angularjs 的方式之后,你会发觉这是一件很诱人的事情。我曾经看到过很多开发者采用将150到200行代码的jQuery插件利用angularjs的回调以及$apply方法封装起来,这种方式使得代码看...

Top