如何使js函数异步执行

Callbacks
Callbacks使用场景在哪里?
在很多时候需要控制一系列的函数顺序执行。那么一般就需要一个队列函数来处理这个问题:

  1. function Aaron(List, callback) {
  2. setTimeout(function() {
  3. var task = List.shift();
  4. task(); //执行函数
  5. if (List.length > 0) {  //递归分解
  6. setTimeout(arguments.callee, 1000)
  7. } else {
  8. callback()
  9. }
  10. }, 25)
  11. }
  12. Aaron([function(){
  13. alert(‘a‘)
  14. },function(){
  15. alert(‘b‘)
  16. }],function(){
  17. alert(‘callback‘)
  18. })
  19. alert(1);

复制代码

简单实现异步: 依次弹出:1 a b(隔了一秒之后) callback
传入一组函数参数,靠递归解析,分个执行,其实就是靠setTimeout可以把函数加入到队列末尾才执行的原理

jQuery提供的方式:

  1. var callbacks = $.Callbacks();
  2. callbacks.add(function() {
  3. alert(‘a‘);
  4. })
  5. callbacks.add(function() {
  6. alert(‘b‘);
  7. })
  8. callbacks.fire(); //输出结果: ‘a‘ ‘b‘

复制代码

便捷很多了,代码又很清晰,所以它是一个多用途的回调函数列表对象,提供了一种强大的方法来管理回调函数队列。

同时还提供几个便捷的处理参数
once: 确保这个回调列表只执行( .fire() )一次(像一个递延 Deferred).
memory: 保持以前的值,将添加到这个列表的后面的最新的值立即执行调用任何回调 (像一个递延 Deferred).
unique: 确保一次只能添加一个回调(所以在列表中没有重复的回调).
stopOnFalse: 当一个回调返回false 时中断调用

  1. var callbacks = $.Callbacks(‘once‘);
  2. callbacks.add(function() {
  3. alert(‘a‘);
  4. })
  5. callbacks.add(function() {
  6. alert(‘b‘);
  7. })
  8. callbacks.fire(); //输出结果: ‘a‘ ‘b‘
  9. callbacks.fire(); //未执行

复制代码

我对jquery源码没有特别深入的研究,在此不再详细说jquery内部的实现。之所以对异步感兴趣,是因为在开发中经常会考虑到这些方面的问题,而且比较感兴趣js如何实现异步?其实还是对原生API的使用,包括SetTimeout,setInterval,HTTPRequest,事件监听等。
设计思想:
涉及到了 add 与 fire方法是基于发布订阅的观察者模式的设计了,事件监听也算是js一种内置的发布/订阅模式
pub/sub (观察者模式) 的背后,总的想法是在应用程序中增强松耦合性。并非是在其它对象的方法上的单个对象调用。一个对象作为特定任务或是另一对象的活动的观察者,并且在这个任务或活动发生时,通知观察者。观察者也被叫作订阅者(Subscriber),它指向被观察的对象,既被观察者(Publisher 或 subject)。当事件发生时,被观察者(Publisher)就会通知观察者(subscriber)
作为 $.Callbacks() 的创建组件的一个演示,只使用回调函数列表,就可以实现 Pub/Sub 系统。将 $.Callbacks 作为一个队列

  1. var Observable = {
  2. callbacks: [],
  3. add: function(fn) {
  4. this.callbacks.push(fn);
  5. },
  6. fire: function() {
  7. this.callbacks.forEach(function(fn) {
  8. fn();
  9. })
  10. }
  11. }
  12. Observable.add(function() {
  13. alert(1)
  14. })
  15. Observable.fire(function() {
  16. alert(2)
  17. })
  18. Observable.fire(); // 1, 2

复制代码

时间: 2024-11-11 23:07:52

如何使js函数异步执行的相关文章

(转)在网页中JS函数自动执行常用三种方法

原文:http://blog.sina.com.cn/s/blog_6f6b4c3c0100nxx8.html 在网页中JS函数自动执行常用三种方法 在网页中JS函数自动执行常用三种方法 在HTML中的Head区域中,有如下函数: <SCRIPT   LANGUAGE="JavaScript">   functionn MyAutoRun() {   //以下是您的函数的代码,请自行修改先! alert("函数自动执行哦!");   } </SCR

在网页中JS函数自动执行常用三种方法

在网页中JS函数自动执行常用三种方法 在HTML中的Head区域中,有如下函数: <SCRIPT   LANGUAGE="JavaScript">   functionn MyAutoRun() {   //以下是您的函数的代码,请自行修改先! alert("函数自动执行哦!");   }  </SCRIPT> 下面,我们就针对上面的函数,让其在网页载入的时候自动运行! ①第一种方法 将如上代码改为: <SCRIPT   LANGUAG

js同步异步执行顺序setTimeOut面试题分析

<script> for(var i=0;i<2;i++){ setTimeout(function(){ console.log(i); },0); } </script> // 结果:2,2 打印两个2而不是0,1,跟js执行顺序有关系. 所有的任务分为两种,一种是同步任务,一种是异步任务.同步任务是指在主线程上排队的任务.异步任务是指不进入主线程.而进入"任务队列"(task queue)的任务,只有"任务队列"通知主线程,某个异

学习js函数--自执行函数

我在写代码时候经常会在tpl的<script>里写类似的代码: $(function(){ alert("我好饿"); }); 刚开始的时候只知道写了它不需要调用,直接执行,就这样依葫芦画瓢,我写了很多代码.说道这,还要说说这货的加载顺序,如果把代码直接写到script标签里,当页面加载完这个script标签就会执行里边的代码了.如果在这代码里用到了未加载的dom或者调用了未加载的方法,是会报错的.言归正传,这个函数其实就是自执行函数,很多人会比较专业地称为"立即

在JS函数中执行C#中的函数、字段

1.调用字段 cs文件的代码: public int id = 0; protected void Page_Load(object sender, EventArgs e) { id = 2; } js页面的代码: function CheckFunc() { alert("<%= id%>"); } 2.调用函数: 在JS函数中访问或执行C#.NET中的函数: 在JS函数中访问C#函数方法一: 首先建立一个按钮,在后台将调用或处理的内容写入button_click中;接

js函数的执行环境

js的函数本质上是一种对象,是对象就会有自己的环境(作用域),看下面的例子 var var1 = { message: "var1", getMessage: function () { alert(this.message); } }; var var2 = { message: "var2", getMessage:var1.getVar1 }; var2.getMessage(); 这段代码会输出 "var2".不对啊,应该是输出"

JS函数立即执行

https://blog.csdn.net/u011215669/article/details/89086362 (()=>{ let canShow = true if(this.props.isPlayerOnly){ canShow = false }else{ if(isFullScreen){ canShow = false } } return {display: canShow ? 'flex':'none' } })() 原生JS代码立即执行: (function(x){con

js的异步执行

1.Javascript语言的执行环境是"单线程"(single thread): 优点:实现起来比较简单,执行环境相对单纯: 缺点:只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行.常见的浏览器无响应(假死),往往就是因为某一段Javascript代码长时间运行(比如死循环),导致整个页面卡在这个地方,其他任务无法执行. 为了解决这个问题,Javascript语言将任务的执行模式分成两种:同步(Synchronous)和异步(Asynchronous). 2.&

js函数自动执行的一点理解

//声明一个匿名函数并赋值给一个变量 var a = function(){ console.log("executing..."); } //匿名函数调用 a(); 相信上面这段代码大家都能看明白,再看下面这段代码 console.log(a() === (a)()); //结果true 于是,下面这段代码也就不难理解了 (function(){ console.log("executing..."); })(); 但是 //结果"缺少标识符"