如何使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
复制代码
原文地址:https://www.cnblogs.com/liuwenbohhh/p/4344471.html