当前位置: 首页>后端>正文

JQUERY 延时加载JS 并执行 jquery 延迟执行方法

javascript的异步编程

  为什么要使用异步编程? 

  JS是单线程语言,就简单性而言,把每一件事情(包括GUI事件和渲染)都放在一个线程里来处理是一个很好的程序模型,因为这样就无需再考虑线程同步这些复杂问题。然而从另一方面来看,它也暴露了实际开发中的一个严重问题,单线程环境看起来对用户请求响应迅速,但是当线程忙于处理其它事情时,就不能对用户的鼠标点击和键盘操作做出响应。因此提出了异步需求,以此来解放当前线程,可以处理其他业务,待回调请求数据返回再发起回来处理。

  何谓异步?关于这个问题,司徒正美给出以下解释:

回调函数的存在打断了原来的执行流程,让它们自行在适当的时机出现并执行,这是个非常便捷的模式。对比主动式的轮询,你就知它多么节能。

异步请求或订阅返回结果的代码就要写到回调函数中,由于代码之间存在依赖,回调函数套回调函数的情况也司空见惯了,这种套嵌结构对以后的维护来说简直是地狱噩梦。由此引出另外一个我们不得不面对的问题,try...catch无法捕捉几毫秒之后发生的异常。另外,除了setTimeout外,异步编程基本上由事件机制承担的,它们的回调函数什么时候发生基本上都是未知数,可能由于后台发生系统级错误,无法再发出响应,或者,系统忙碌,一时半刻响应不过来,这两种情况我们也必需提供一个策略,中断这操作,也就是所谓的abort,这些都是异步编程的所要处理的课题

  Deferred对象是用来解决JS中的异步编程,它遵循 Common Promise/A 规范,在jQuery代码自身代码中有四处使用地方,分别是promise方法、DOM ready、ajax模块、动画模块。既然谈到 Common Promise/A 规范就先来了解下这个规范说了什么。

pending(执行中)、resolve(执行成功)和rejected(执行失败)。

  其中pending为初始状态,resolve和rejected为结束状态(结束状态表示promise的生命周期已结束)。状态转换关系为:

    pending->resolve,pending->rejected。

  随着状态的转换将触发各种事件(如执行成功事件、执行失败事件等)。promise以未完成的状态开始,如果成功它将会是完成态,如果失败将会是失败态。当一个promise移动到完成态,所有注册到它的成功回调将被调用,而且会将成功的结果值传给它。另外,任何注册到promise的成功回调,将会在状态机切换到完成状态以后立即被调用。

来看下代码的实现: 

Deferred: function( func ) {
        var tuples = [//依赖了Calback回调队列管理。
                // action, add listener, listener list, final state
                [ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ],
                [ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ],
                [ "notify", "progress", jQuery.Callbacks("memory") ]
            ],//tuples 创建三个$.Callbacks对象,分别表示成功,失败,处理中三种状态
state = "pending",
            promise = {
                state: function() {//state的get访问器:通过闭包访问状态机的状态,确保只能访问到Deferred对象的state,而无法修改state
                    return state;
                },
                always: function() {//无论最终状态为成功抑或是失败都会触发always,根据state执行deferred对象的成功回调或失败回调
                    deferred.done( arguments ).fail( arguments );
                    return this;
                },
                then: function( /* fnDone, fnFail, fnProgress */ ) {
                    var fns = arguments;
                    return jQuery.Deferred(function( newDefer ) {
                        jQuery.each( tuples, function( i, tuple ) {//逐一定义deferred对象成功、失败、执行中的处理函数执行之后的处理函数。
                            var fn = jQuery.isFunction( fns[ i ] ) && fns[ i ];
                            // deferred[ done | fail | progress ] for forwarding actions to newDefer
                            deferred[ tuple[1] ](function() {
                                var returned = fn && fn.apply( this, arguments );
                                if ( returned && jQuery.isFunction( returned.promise ) ) {
                                    returned.promise()
                                        .done( newDefer.resolve )
                                        .fail( newDefer.reject )
                                        .progress( newDefer.notify );
                                } else {
                                    newDefer[ tuple[ 0 ] + "With" ]( this === promise ? newDefer.promise() : this, fn ? [ returned ] : arguments );
                                }
                            });
                        });
                        fns = null;
                    }).promise();
                },
                // Get a promise for this deferred
                // If obj is provided, the promise aspect is added to the object
                promise: function( obj ) {
                    return obj != null ? jQuery.extend( obj, promise ) : promise;
                }
            },
            deferred = {};

        // Keep pipe for back-compat
        promise.pipe = promise.then;

        // Add list-specific methods
        jQuery.each( tuples, function( i, tuple ) {//回调函数的存入
            var list = tuple[ 2 ],
                stateString = tuple[ 3 ];

            // promise[ done | fail | progress ] = list.add
            promise[ tuple[1] ] = list.add;//设计精妙,在状态机上挂载 done | fail | progress 方法,实际应用对应为Callback对象的add方法

            // Handle state
            if ( stateString ) {//如果存在最终状态:成功或失败都存在最终状态,处理中不存在undefined
                list.add(function() {
                    // state = [ resolved | rejected ]
                    state = stateString;

                // [ reject_list | resolve_list ].disable; progress_list.lock
                }, tuples[ i ^ 1 ][ 2 ].disable, tuples[ 2 ][ 2 ].lock );//给当前回调队列Callback增加三个回调函数,i^1为异或 成功则修改失败回调队列disable(不执行),失败则修改成功回调队列disable不执行
            }

            // deferred[ resolve | reject | notify ]
            deferred[ tuple[0] ] = function() {//定义触发函数
                deferred[ tuple[0] + "With" ]( this === deferred ? promise : this, arguments );
                return this;
            };
            deferred[ tuple[0] + "With" ] = list.fireWith;
        });

        // Make the deferred a promise
        promise.promise( deferred );//扩展deferred,继承promise属性——即赋予deferred对象状态机属性

        // Call given func if any
        if ( func ) {
            func.call( deferred, deferred );
        }

        // All done!
        return deferred;
    },

    // Deferred helper
    when: function( subordinate /* , ..., subordinateN */ ) {
        var i = 0,
            resolveValues = slice.call( arguments ),
            length = resolveValues.length,

            // the count of uncompleted subordinates
            remaining = length !== 1 || ( subordinate && jQuery.isFunction( subordinate.promise ) ) ? length : 0,

            // the master Deferred. If resolveValues consist of only a single Deferred, just use that.
            deferred = remaining === 1 ? subordinate : jQuery.Deferred(),

            // Update function for both resolve and progress values
            updateFunc = function( i, contexts, values ) {
                return function( value ) {
                    contexts[ i ] = this;
                    values[ i ] = arguments.length > 1 ? slice.call( arguments ) : value;
                    if ( values === progressValues ) {
                        deferred.notifyWith( contexts, values );

                    } else if ( !(--remaining) ) {
                        deferred.resolveWith( contexts, values );
                    }
                };
            },

            progressValues, progressContexts, resolveContexts;

        // add listeners to Deferred subordinates; treat others as resolved
        if ( length > 1 ) {
            progressValues = new Array( length );
            progressContexts = new Array( length );
            resolveContexts = new Array( length );
            for ( ; i < length; i++ ) {
                if ( resolveValues[ i ] && jQuery.isFunction( resolveValues[ i ].promise ) ) {
                    resolveValues[ i ].promise()
                        .done( updateFunc( i, resolveContexts, resolveValues ) )
                        .fail( deferred.reject )
                        .progress( updateFunc( i, progressContexts, progressValues ) );
                } else {
                    --remaining;
                }
            }
        }

        // if we're not waiting on anything, resolve the master
        if ( !remaining ) {
            deferred.resolveWith( resolveContexts, resolveValues );
        }

        return deferred.promise();
    }

(一)、首先来理解下deferred功能:

  1、异步队列是一个链式对象,增强对回调函数Callback的管理和调用,用于处理异步任务。

  2、异步队列有三种状态:处理中(progress),成功(resolved),失败(rejected)。

  3、执行哪些回调函数依赖于状态,状态变为成功(resolved)或失败(rejected)后,将保持不变。

  4、回调函数的绑定可以是同步,也可以是异步的,即可以在任何时候绑定 

(二)、$.Deferred的实现

     1、首先代码中定义tuples数组:这个数组是干嘛的呢?

    (1)、tuples[i][0]:定义deferred对象的触发回调函数列表执行(函数名):deferred.resolve,deferred.reject,deferred.notify

    (2)、tuples[i][1]:同上,定义添加回调函数的函数名:done、fail、progress

    (3)、tuples[i][2]:这里依赖$.Callbacks对象,用它创建了三个$.Callbacks对象,分别管理成功,失败,处理中回调函数队列

    (4)、tuples[i][3]:deferred最终状态(第三组数据除外): 定义了成功最终状态(resolved),失败的最终状态(rejected)

  2、创建了一个状态机promise对象,具有state、always、then、primise方法

           (1)state:获取闭包属性state。默认pending;

    (2)always:设置deferred对象成功和失败处理队列,根据state执行deferred对象的成功回调或失败回调

    (3)then:

    (4)promise:将赋予对象状态机特性(内部同过$.extend来扩展),即新对象将拥有state、always、then、primise方法,即状态机的属性

  3、jQuery.each遍历tuples:设置promise对象done,fail,progress属性引用Callback对象add方法,同时给deferred对象扩充6个方法

    (1)resolve/reject/notify 类似 Callbacks.fire,调用对应**With,执行回调函数

    (2)resolveWith/rejectWith/notifyWith 是 Callbacks.fireWith 队列方法引用

  4、通过扩展primise对象生成最终的Deferred对象,返回该对象。如下图:

 

JQUERY 延时加载JS 并执行 jquery 延迟执行方法,JQUERY 延时加载JS 并执行 jquery 延迟执行方法_异步编程,第1张

从上图可以清晰看出:deferred对象的state、always 、promise、then是从promise对象扩展而来的,其他方法pipe <==>then ,

done、fail、progress是对象三个Callback对象的回调add方法;——回调方法/事件订阅

reject、resolve、notify为触发相应执行回调队列的fire方法——通知方法/事件发布

rejectWith、resolveWith、notifyWith为执行相应回调队列的fireWidth方法——通知方法/事件发布 

 (三)、具体来分析deferred对象上的方法:

(1)、deferred.done()——  订阅状态为成功(resolved)时回调函数,保存到对应的Callback对象
  (2)、deferred.fail()——  订阅状态为失败(rejected)时回调函数,保存到对应Callback对象
  (3)、deferred.progress()——订阅状态为处理中(pending)时回调函数,保存到对应Callback对象
  (4)、deferred.then()——增加成功回调函数和失败回调函数到各自的队列中;两个参数可以是数组或null,状态为成功(resolved)时立即调用成功回调函数,状态为失败(rejected)时立即调用失败回调函数
  (5)、deferred.always()——增加回调函数,同时增加到成功队列和失败队列,状态已确定(无论成功或失败)时立即调用回调函数
  (6)、deferred.resolve()——通过调用deferred.resolveWith()实现成功回调函数队列调用
  (7)、deferred.resolveWith()——使用指定的上下文和参数执行成功回调函数
  (8)、deferred.reject()——通过调用deferred.rejectWith()实现失败回调函数队列调用
  (9)、deferred.rejectWith()——使用指定的上下文和参数执行成功回调函数
  (10)、deferred.pipe()——每次调用回调函数之前先调用传入的成功过滤函数或失败过滤函数,并将过滤函数的返回值作为回调函数的参数最终返回一个只读视图(调用promise实现)
  (11)、deferred.promise()——返回deferred的只读视图

 (四)、$.when的实现

  1. 接受若干个对象,参数仅一个且非Deferred对象将立即执行回调函数
  2. Deferred对象和非Deferred对象混杂时,对于非Deferred对象remaining减1
  3. Deferred对象总数 = 内部构建的Deferred对象 + 所传参数中包含的Deferred对象
  4. 所传参数中所有Deferred对象每当resolve时remaining减1,直到为0时(所有都resolve)执行回调

 (五)、大家可能对ajax异步回调比较熟悉,那下面用ajax分析如何使用deferred对象。

(1) done/resolve

function cb() {
alert('success')
}
var deferred = $.Deferred()
deferred.done(cb)
setTimeout(function() {
deferred.resolve()
}, 3000)

这里使用setTimeout来模拟ajax请求(下同),在HTTP中表示后台返回成功状态(如200)时使用,执行deferred.resolve(),则会触发请求成功后的回调函数cb。 

(2)、fail/reject

function cb() {
alert('fail')
}
var deferred = $.Deferred()
deferred.fail(cb)
setTimeout(function() {
deferrd.reject()
}, 3000)

 在HTTP中表示后台返回非成功状态时使用,执行deferred.resolve() ,触发请求失败后的回调函数alert(fail)。

 (3)、progress/notify

function cb() {
alert('progress')
}
var deferred = $.Deferred()
deferred.progress(cb)
setInterval(function() {
deferred.notify()
}, 2000)

注意到没有,这里使用在setInterval来模拟,HTTP中表示请求过程中使用,请求过程中不断执行deferred.notify(),即不断执行回调函数。这可用在文件上传时的loading百分比或进度条。

(4)、便利函数then,一次添加成功,失败,进度回调函数

function fn1() {
    alert('success')
}
function fn2() {
    alert('fail')
}
function fn3() {
    alert('progress')
}
var deferred = $.Deferred()
deferred.then(fn1, fn2, fn3)

调用then后还可以继续链式调用then添加多个不同回调函数,这个then也正是jQuery对 Common Promise/A 的实现。 

(5)、使用always方法为成功,失败状态添加同一个回调函数

var deferred = $.Deferred()
deferred.always(function() {
    var state = deferred.state()
    if ( state === 'resolved') {
        alert('success')
    } else if (state === 'rejected') {
        alert('fail')
    }
})
setTimeout(function() {
    deferred.resolve()
    //deferred.reject()
}, 3000)

回调函数中可以使用deferred.state方法获取异步过程中的最终状态,这里我调用的是deferred.resolve,因此最后的状态是resolved,表示成功。

 (6)、when方法保证多个异步操作全部成功后才回调

function fn1() {
    alert('done1')
}
function fn2() {
    alert('done2')
}
function fn3() {
    alert('all done')
}
 
var deferred1 = $.Deferred()
var deferred2 = $.Deferred()
 
deferred1.done(fn1)
deferred2.done(fn2)
$.when(deferred1, deferred2).done(fn3)
 
setTimeout(function() {
    deferred1.resolve()
    deferred2.resolve()
}, 3000)

先后弹出了done1、done2、all done。 如果setTimeout中有一个reject了,fn3将不会被执行。

 (7)、如果多个请求完成后才算成功,1.5之前的是无法解决的,现在则可以用$.when搞定

var ajax1 = $.ajax(url1)
var ajax2 = $.ajax(url2)
$.when(ajax1, ajax2).done(success)



https://www.xamrdz.com/backend/39s1964075.html

相关文章: