JS中的回调函数实例浅析

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

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

document.getElementById('demo').click=function(){
  alert(1);
};

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

document.getElementById('demo').addEventListener('click',function(){
    alert(1)
});

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

function demo(a,b,callback){
    let c=a+b;
    callback(c);
};
demo(1,2,function(c){
    alert(c);//3
})

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

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

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

更多关于JavaScript相关内容可查看本站专题：《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

  • js中回调函数的学习笔记
  • 告诉你什么是javascript的回调函数
  • 理解javascript中的回调函数(callback)
  • js 异步操作回调函数如何控制执行顺序
  • 关于javascript 回调函数中变量作用域的讨论
  • Javascript中的回调函数和匿名函数的回调示例介绍
  • Javascript基于AJAX回调函数传递参数实例分析
  • JS回调函数的应用简单实例
  • 谈谈JavaScript自定义回调函数
  • JS动态插入并立即执行回调函数的方法
  • js自定义回调函数
  • JavaScript 动态添加脚本，并触发回调函数的实现代码
赞 (0)

相关推荐

  • js中回调函数的学习笔记

    回调函数是什么在学习之前还真不知道js回调函数怎么使用及作用了,下面本文章把我在学习回调函数例子给各位同学介绍一下吧,有需了解的同学不防进入参考. 回调函数原理: 我现在出发,到了通知你" 这是一个异步的流程,"我出发"这个过程中(函数执行),"你"可以去做任何事,"到了"(函数执行完毕)"通知你"(回调)进行之后的流程 例子 1.基本方法 <script language="javascript&q

  • 关于javascript 回调函数中变量作用域的讨论

    1.背景 Javascript中的回调函数,相信大家都不陌生,最明显的例子是做Ajax请求时,提供的回调函数, 实际上DOM节点的事件处理方法(onclick,ondblclick等)也是回调函数. 在使用DWR的时候,回调函数可以作为第一个或者最后一个参数出现,如: JScript code function callBack(result){ } myDwrService.doSomething(param1,param2,callBack);//DWR的推荐方式 //或者 myDwrSer

  • JS回调函数的应用简单实例

    JS的回调函数很简单,看代码: 在a.js中 var myback = null; function load(obj){ myback = obj; } function save(){ // 后台请求 $.ajax.post...... // 调用回调函数 myback(); } 在b.js中进行调用 // 就是把要回调的函数当成参数传递过去! load(function(){ this.hide(); })

  • 理解javascript中的回调函数(callback)

    最近在看 express,满眼看去,到处是以函数作为参数的回调函数的使用.如果这个概念理解不了,nodejs.express 的代码就会看得一塌糊涂.比如: 复制代码 代码如下: app.use(function(req, res, next) {     var err = new Error('Not Found');     err.status = 404;     next(err); }); app是对象,use是方法,方法的参数是一个带参的匿名函数,函数体直接在后面给出了.这段代码

  • Javascript中的回调函数和匿名函数的回调示例介绍

    复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> /* * 匿名函数自调的意义: 1.营造了一个封闭的空间 2.防止变量冲突 3.有选择性的对外开发(第三方框架都是对js这样封装

  • 告诉你什么是javascript的回调函数

    函数也是对象 想弄明白回调函数,首先的清楚地明白函数的规则.在javascript中,函数是比较奇怪的,但它确确实实是对象.确切地说,函数是用Function()构造函数创建的Function对象.Function对象包含一个字符串,字符串包含函数的javascript代码.假如你是从C语言或者java语言转过来的,这也许看起来很奇怪,代码怎么可能是字符串?但是对于javascript来说,这很平常.数据和代码之间的区别是很模糊的. //可以这样创建函数 var fn = new Functio

  • 谈谈JavaScript自定义回调函数

    谈谈JavaScript自定义回调函数

    废话不多说了,直接给大家贴代码了. 背景分析 首先看一段js的代码,主要实现添加的时候首先通过异步请求判断是否存在,如果不存在的话,在进行添加操作: function add(url,data) { var isExited = isExited(data); if(!isExited){ addRequest(url, data); } } 当我添加一个数据的时候,我首先通过判断是否在数据库中存在(当然,如果前后台彻底分离的话,不应该前端进行业务逻辑的判断,前端只应该,用来展示数据),首先,i

  • js自定义回调函数

    背景分析 首先看一段js的代码,主要实现添加的时候首先通过异步请求判断是否存在,如果不存在的话,在进行添加操作: function add(url,data) { var isExited = isExited(data); if(!isExited){ addRequest(url, data); } } 当我添加一个数据的时候,我首先通过判断是否在数据库中存在(当然,如果前后台彻底分离的话,不应该前端进行业务逻辑的判断,前端只应该,用来展示数据),首先,isExited()的请求是ajax请

  • JavaScript 动态添加脚本，并触发回调函数的实现代码

    function loadScript(url, callback){ var script = document.createElement("script") script.type = "text/javascript"; if (script.readyState){ //IE script.onreadystatechange = function(){ if (script.readyState == "loaded" || scri

  • js 异步操作回调函数如何控制执行顺序

    需求: fun A() { asyn(parm1, parm2, onsuccess(){ }) ;} fun B() {asyn(paem1, parm2, onsuccess(){}) ;} 函数B要求执行在函数A之后 异步执行 如果直接使用 A(); B(); 是不能够满足执行条件的. 考虑将B作为回调函数传递给A,然后A再执行的onsucess中执行B函数 A(B); 即可实现功能需求. js是单线程的. 1.调用函数时,如果参数多于定义时的个数,则多余的参数将会被忽略,如果少于定义时的

  • JS动态插入并立即执行回调函数的方法

    本文实例讲述了JS动态插入并立即执行回调函数的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • Javascript基于AJAX回调函数传递参数实例分析

    本文实例讲述了Javascript基于AJAX回调函数传递参数的方法.分享给大家供大家参考,具体如下: 前面介绍了<javascript实现html页面之间参数传递的四种方法>,这里针对ajax参数传递做一分析. 在Javascript 中,特别是在AJAX中,回调函数常常是一个函数名,没有地方放入参数,如下面的AJAX代码,在成功后将调用回调函数callback,但callback是有参数的,如何把参数传进来呢? var callback = function(p1){ //do somet

随机推荐