关于js中的回调函数callback,通俗易懂
前言
其实我一直很困惑关于js 中的callback,困惑的原因是,学习中这块看的资料少,但是平时又经常见,偶尔复制一下前人代码,功能实现了也就不再去追其原由,这么着,这个callback的概念就越来越混乱,因为你总感觉它是你Ajax请求后调用的那个函数,又感觉它是你某一个函数中的形参而已,而当你有一天看到一点关于Node.js的代码后你会更加崩溃,因为你会发现很多的callback,但是这么着下去肯定是不行的,因为很多的东西如果只是知道概念和理论,没有实践出结果,没有思考和感受,这些东西永远不是你的,所以任何关于技术上用到的东西都应该去花时间钻研一下,学习 付出时间 实践都会搞明白的,还会沉淀很多思想,所以最近一直在浏览相关的文章和资料,自己在项目中也用到了一些去实践,这样一轮下来后,你会发现明亮了很多
一 .搞清楚异步和同步
异步async/同步sync
举个小栗子
1.早上起来不论你是先刷牙还是先洗脸,都要等一个事情完毕后才能进行下一项,这就是一个同步的例子
2.然后刷牙的时候你也可以烧水喝 (不用等你刷完牙)这就是一个异步的例子
来段异步代码示例
以上代码会先执行函数a,而且不会等到a中的延迟函数执行完才执行函数b, 在延迟函数被触发的过程中就执行了函数b,当js引擎的event 队列空闲时才会去执行队列里等待的setTimeout的回调函数,这就是一个异步的例子
题外话:
调用 setTimeout 函数会在一个时间段过去后在队列中添加一个消息。这个时间段作为函数的第二个参数被传入。如果队列中没有其它消息,消息会被马上处理。但是,如果有其它消息,setTimeout 消息必须等待其它消息处理完。因此第二个参数仅仅表示最少的时间 而非确切的时间
所以即使,时间设置为0,也是会照样先执行函数b
来段同步代码示例
print函数会等change函数完成之后去执行,所以结构输出为1,因为change函数修改了全局变量a的值,change执行之后才执行的print函数
二.回调函数到底是什么
A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.
以上解释是Google得出的解释,非常清晰简明,有时候我觉得英文理解要比翻译成中文二次理解更清楚
来看几个经典的回调函数代码,我敢保证你一定用过他们
所以回调与同步、异步并没有直接的联系,回调只是一种实现方式,既可以有同步回调,也可以有异步回调,还可以有事件处理回调和延迟函数回调,这些在我们工作中有很多的使用场景
所以其实并不是我们不认识回调函数,而是我们都萦绕在了这个“callback“ 这个词上,当你在一个函数中看到它是就会困惑,其实它只是一个形参名字而已
三.为什么写回调函数
看了以上的简单介绍之后,是不是对callback不再陌生和觉得神秘,所以尽情的去使用吧,
1.关于回调函数和js单线程以及js异步机制
我们都知道js是单线程的,这种设计模式给我们带来了很多的方便之处,我们不需要考虑各个线程之间的通信,也不需要写很多烧脑的代码,也就是说js的引擎只能一件一件事的去完成和执行相关的操作,所以所有需要执行的事情都像排队一样,等待着被触发和执行,可是如果这样的话,如果在队列中有一件事情需要花费很多的时间,那么后面的任务都将处于一种等待状态,有时甚至会出现浏览器假死现象,例如其中有一件正在执行的一个任务是一个死循环,那么会导致后续其他的任务无法正常执行,所以js在同步机制的缺陷下设计出了异步模式
在异步执行的模式下,每一个异步的任务都有其自己一个或着多个回调函数,这样当前在执行的异步任务执行完之后,不会马上执行事件队列中的下一项任务,而是执行它的回调函数,而下一项任务也不会等当前这个回调函数执行完,因为它也不能确定当前的回调合适执行完毕,只要引它被触发就会执行,举个例子,
上图可以看到,我要购买一个东西,当我点进物品的详情页之后,图片资源还未请求完毕,而此时我就可以点击add to cart, 发起另一个请求,js任务列表中的添加购物车事件就会开始执行,它的执行也不会干扰到图片资源的请求任务,这也是异步执行机制的妙处
2.js的单线程浏览器内核的多线程
说到js的单线程,顺便再了解一下关于浏览器内核的多线程,关于浏览器工作原理此处不做讲解,因为自己研究的不深入,等待研究学习研究透彻再分享
浏览器常驻三大线程: js引擎线程,GUI渲染线程,浏览器事件触发线程
看到此图你是不是会豁然开朗许多,因为浏览器是一个多线程的执行环境,在浏览器的内核中分配了多个线程,最主要的线程之一即是js引擎的线程,同时js事件队列中的异步请求,交互事件触发,定时器等事件都是由浏览器的事件触发线程进行监听的,浏览器的事件触发线程被触发后会把任务加入到js 引擎的任务队列中,当js 引擎空闲时候就会开始执行该任务
完结
以上就是本篇文章的全部内容,由对回调函数的陌生到熟悉和使用,以及对同步/异步的概念,还有js的执行机制以及浏览器内核的多线程机制相信大家都有了一个简单的知识脉络,希望通过此文提到的内容,每个小伙伴去查阅更深入的资料,于此同时我也会不断的去修缮,所以我们不能做一个知其然而不知其所以然的程序员,要有充分的好奇心去学习它,带着学习让我们受益的心态去做和研究自己感兴趣的东西是一件非常快乐的事情,希望我可以把我的快乐带给每一位看文章的小伙伴,也希望你多多给我提出意见,让我们一起在学习的路上共同发现和成长,2107年欢迎你和我一起做一个不断努力学习的知识分子
说明:文章中的图片均处于本人截图和绘制,文字均属原创,转载请注明出处
作者:Cayley硕儿
链接:https://www.jianshu.com/p/6bc353e5f7a3
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
关于js中的回调函数callback,通俗易懂的更多相关文章
- 关于js中的回调函数callback
来源于:http://www.jianshu.com/p/6bc353e5f7a3 前言 其实我一直很困惑关于js 中的callback,困惑的原因是,学习中这块看的资料少,但是平时又经常见,偶尔复制 ...
- 关于 js 中的回调函数 callback
本文写于1年前 曾经的学习文章如今拿出来分享 前言 其实我一直很困惑关于js中的callback,困惑的原因是,学习中这块看的资料少,但是平时又经常见,偶尔复制一下前人代码,功能实现了也就不再去追其原 ...
- js中的回调函数的理解和使用方法
js中的回调函数的理解和使用方法 一. 回调函数的作用 js代码会至上而下一条线执行下去,但是有时候我们需要等到一个操作结束之后再进行下一个操作,这时候就需要用到回调函数. 二. 回调函数的解释 因为 ...
- 理解javascript中的回调函数(callback)【转】
在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String.Array.Number.Object类的对象一样用于内置对象的管理.因为function实 ...
- JS中的回调函数实例浅析
本文实例讲述了JS中的回调函数.分享给大家供大家参考,具体如下: 在说回调函数之前,不妨先看一段代码,相信有点js基础的同学都能明白他的含义: ? 1 2 3 document.getElementB ...
- 理解javascript中的回调函数(callback)
以下内容来源于:http://www.jb51.net/article/54641.htm 最近在看 express,满眼看去,到处是以函数作为参数的回调函数的使用.如果这个概念理解不了,nodejs ...
- js中的回调函数的理解
一,常见的但是不是特别注意的回调方法. 1.1,ajax $.ajax({ url:"test.json", type: "GET", data: {usern ...
- js中的回调地狱 Callback to Hell
本文重点:解决方式:1.promise 2. 拆解 function:将各步拆解为单个的 function 3. 通过 Generator 函数暂停执行的效果方式 4. 通过ES8的异步函 ...
- Scrapy - Request 中的回调函数callback不执行
回调函数callback不执行 大概率是被过滤了 两种方法: 在 allowed_domains 中加入目标url 在 scrapy.Request() 函数中将参数 dont_filter=True ...
随机推荐
- Morris莫里斯遍历
程序员代码面试指南(第2版)第3章 二叉树问题:遍历二叉树的神级方法 https://leetcode.com/articles/binary-tree-inorder-traversal/ Step ...
- Linux速通 大纲
1.Linux操作系统安装及初始化配置(熟悉) 2.Linux操作系统目录组成结构及文件级增删改查操作(重点) 3.Linux操作系统用户.权限管理(重点) 4.开源软件及Linux下软件包的管理(重 ...
- Spark SQL中Not in Subquery为何低效以及如何规避
首先看个Not in Subquery的SQL: // test_partition1 和 test_partition2为Hive外部分区表 select * from test_partition ...
- Python基础(1)——变量和数据类型[xiaoshun]
目录 一.变量 1.概述 Variables are used to store information to be referenced(引用)and manipulated(操作) in a co ...
- Vue.js 学习笔记之七:使用现有组件
5.3 使用现有组件 在之前的五个实验中,我们所演示的基本都是如何构建自定义组件的方法,但在具体开发实践中,并非项目中所有的组件都是需要程序员们自己动手来创建的.毕竟在程序设计领域,"不要重 ...
- DEV表格设置列不可编辑
现在是可编辑的 Run Designer--Columns--Column options下的AllowEdit属性改为false即可
- Windows下解析命令行参数
linux通常使用GNU C提供的函数getopt.getopt_long.getopt_long_only函数来解析命令行参数. 移植到Windows下 getopt.h #ifndef _GETO ...
- 使用C# (.NET Core) 实现装饰模式 (Decorator Pattern) 并介绍 .NET/Core的Stream
该文章综合了几本书的内容. 某咖啡店项目的解决方案 某咖啡店供应咖啡, 客户买咖啡的时候可以添加若干调味料, 最后要求算出总价钱. Beverage是所有咖啡饮料的抽象类, 里面的cost方法是抽象的 ...
- JS实现鼠标点击爱心&绘制多边形&每日一言功能
本篇文章主要介绍我的个人博客 程序猿刘川枫 中页面使用的美化功能(基于JS实现): 1.鼠标点击出现不同颜色爱心特效 2.页面浮动多边形跟随鼠标移动 3.每日一言功能 1.鼠标点击出现爱心特效 经常在 ...
- 如何快速编写一个微信Api?
概述 Magicodes.Wx.Sdk致力于打造最简洁最易于使用的微信Sdk,逐步包括公众号Sdk.小程序Sdk.企业微信Sdk等,以及Abp VNext集成. 本篇将侧重于讲述如何向Magicode ...