Javascript异步编程方法总结

时间:2022-11-09 20:50:18

现在我们有三个函数,f1, f2, f3

按正常的思路我们会这样写代码:

function f1 (){};
function f2 (){};
function f3 (){};
//在这里调用函数
f1();
f2(); //假如这个函数会执行很长时间
f3();

  但是假如我们f2这个函数在执行的时候会花费大量时间,或者直接就进入了一个死循环了,那我们的f3就别指望能被调用了,因为Javascript语言的执行环境是"单线程"(single thread)。

所谓"单线程",就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推。

  为了应对这样的事情,我们就有了异步模式编程;

方法一:回调方法实现异步编程

  要点:setTimeout 和 setInterval这两个定时器默认都是异步模式执行

  我们把代码写成这样:

 function f1 (){};
function f2 (callback){
setTimeout(function(){
callback();
},1000)
//f2的代码在这里执行
//如果把setTimeout放到末尾,依然要等f2执行完才能被触发
};
function f3 (){};
//在这里调用函数
f1();
f2( f3() ); //f3函数是以参数的形式传入,它在f2开始执行1s后开始执行f3函数

方法二:事件监听

这种方式是采用事件驱动模式。即任务的执行不取决于代码的顺序,而取决于某个事件是否发生

Javascript异步编程方法总结的更多相关文章

  1. 深入解析Javascript异步编程

    这里深入探讨下Javascript的异步编程技术.(P.S. 本文较长,请准备好瓜子可乐 :D) 一. Javascript异步编程简介 至少在语言级别上,Javascript是单线程的,因此异步编程 ...

  2. JavaScript异步编程的主要解决方案—对不起,我和你不在同一个频率上

    众所周知(这也忒夸张了吧?),Javascript通过事件驱动机制,在单线程模型下,以异步的形式来实现非阻塞的IO操作.这种模式使得JavaScript在处理事务时非常高效,但这带来了很多问题,比如异 ...

  3. JavaScript异步编程原理

    众所周知,JavaScript 的执行环境是单线程的,所谓的单线程就是一次只能完成一个任务,其任务的调度方式就是排队,这就和火车站洗手间门口的等待一样,前面的那个人没有搞定,你就只能站在后面排队等着. ...

  4. JavaScript异步编程(2)- 先驱者:jsDeferred

    JavaScript当前有众多实现异步编程的方式,最为耀眼的就是ECMAScript 6规范中的Promise对象,它来自于CommonJS小组的努力:Promise/A+规范. 研究javascri ...

  5. 你所必须掌握的三种异步编程方法callbacks,listeners,promise

    目录: 前言 Callbacks Listeners Promise 前言 coder都知道,javascript语言运行环境是单线程的,这意味着任何两行代码都不能同时运行.多任务同时进行时,实质上形 ...

  6. JavaScript异步编程

    前言 如果你有志于成为一个优秀的前端工程师,或是想要深入学习JavaScript,异步编程是必不可少的一个知识点,这也是区分初级,中级或高级前端的依据之一.如果你对异步编程没有太清晰的概念,那么我建议 ...

  7. JavaScript 异步编程的前世今生(上)

    前言 提到 JavaScript 异步编程,很多小伙伴都很迷茫,本人花费大约一周的业余时间来对 JS 异步做一个完整的总结,和各位同学共勉共进步! 目录 part1 基础部分 什么是异步 part2 ...

  8. Javascript异步编程之一异步原理

    本系列的例子主要针对node.js环境,但浏览器端的原理应该也是类似的. 本人也是Javascript新手,把自己这段时间学习积累的要点总结下来,希望可以对同样在学习Javascript/node.j ...

  9. Javascript异步编程之二回调函数

    上一节讲异步原理的时候基本上把回掉函数也捎带讲了一些,这节主要举几个例子来具体化一下.在开始之前,首先要明白一件事,在javascript里函数可以作为参数进行传递,这里涉及到高阶函数的概念,大家可以 ...

随机推荐

  1. querySelector系列方法相比 getElementsBy 系列方法有什么区别?

    querySelector 和  querySelectorAll 相比下面这些方法有什么区别? getElementsByTagName getElementsByClassName getElem ...

  2. Linux学习之八——利用变量

    一.变量的使用 用$放在变量前面进行使用,例如: echo $PATH 为了和别的字符隔开,可以用{}和"",例如 echo ${PATH}nic echo "$PATH ...

  3. IL学习资料

    读懂IL代码就这么简单 由浅入深CIL系列 .net IL 指令速查

  4. <Android>关于EditText中setInputType和setSingleLine的冲突

    近期自己开发了一个带有删除button的EditText,一方面须要设置为SingleLine,还有一方面又须要设置输入类型,起先在xml文件里设置了android:inputType类型,在自己定义 ...

  5. 【bzoj1212】 [HNOI2004]L语言

    题目描述 标点符号的出现晚于文字的出现,所以以前的语言都是没有标点的.现在你要处理的就是一段没有标点的文章. 一段文章T是由若干小写字母构成.一个单词W也是由若干小写字母构成.一个字典D是若干个单词的 ...

  6. 微信简单Demo

    新建一个WxHandler.ashx public class WxHandler : IHttpHandler { public static string Msg; public void Pro ...

  7. HDU 2846 Repository(字典树)

    字典树较为复杂的应用,我们在建立字典树的过程中需要把所有的前缀都加进去,还需要加一个id,判断它原先是属于哪个串的.有人说是AC自动机的简化,但是AC自动机我还没有做过. #include<io ...

  8. mysql批量进行optimize table操作

    数据库运行一段时间后,有可能会有磁盘磁片产生,此时我们需要进行optimize table操作 # 获取需要optimize的表:如下为获取总大小小于80G的表进行操作:mysql -utroot - ...

  9. PHP empty、isset、isnull的区别

    PHP empty.isset.isnull的区别 empty 如果 变量 是非空或非零的值,则 empty() 返回 FALSE.换句话说,”".0.”0″.NULL.FALSE.arra ...

  10. Microsoft Power BI Desktop概念学习系列之Microsoft Power BI Desktop的下载和安装(图文详解)

    不多说,直接上干货! 官网 https://powerbi.microsoft.com/zh-cn/downloads/ 这里,一般用126邮箱. 因为对于163这样的邮箱是不行. 欢迎大家,加入我的 ...