解决多次异步请求紊乱问题 - JavaScript

加入目前的需求这样的： 
      左边的菜单链接，点击后通过异步请求返回其HTML代码，然后innerHTML到右面的DIV中，加入切换菜单的速度非常快，最终会导致请求紊乱。 
可以加入消息管理机制，下面一个例子，代码没有优化，只提供思路。
​1. [代码][JavaScript]代码     
// 在DOMready的时候创建一个消息管理器messageMgr，包含一个队列(Queue)，增(Create)、删(Remove)、判断(isAvailable)函数。
//给每个module设置一个Action，此Action必须有init，dispose方法，init方法先Create一个时间戳(Token)，压入Queue并返回给Action保持。异步请求的时候携带该Token，在callback函数执行之前判断（isAvailable）此Token是否在Queue中，防止非正常的回调。ppt素材
//只有当该Action被销毁（dispose）的时候删除该Token，然后操作其他的事件卸载（onBind）.
  
var messageMgr = {
         __Queue: [],
         Create: function(){
              var __key = new Date().getMilliseconds();
              this.__Queue.push(__key);
              return __key;
         };
         Remove:   function (token) {
              token && baidu.array.remove(this.__Queue, token);
         },
         isAvailable:function (token) {
             return baidu.array.contains(this.__Queue, token);
         }
};
var asyn = function(url, data, opt){
         opt = opt || {};   
         //异步请求对象
         var __callBack = function(xhr, responseText){
                  if(opt.token && !messageMgr.isAvailable(opt.token)) return false;
                  opt.callback && opt.callback(xhr, responseText);
         };http://www.huiyi8.com/ppt/​
         baidu.ajax.request(url, {
                 method:   opt.method || "post",
                 data:     data,
                 onsuccess: __callBack,
                 timeout:  options.timeout || 600000,
                 onfailure:function () {
                         alert("网络传输异常。");
                 }
         });
};
var blogCat = function(){
         var __token = null;
    
         var __asynRequest = function(){
                  var __callBack = function(list){
                   //渲染列表操作
                  }
                  var __data = {};
                  messageMgr.asyn("/remoteHC.php",  __data, {
                           token: __token,
                           callback : __callBack
                  });
         };
         var __init = function(){
                  //绑定事件其他操作
                  __token = messageMgr.Create();
         };
         var __dispose: function(){
                  //出栈
                  messageMgr.Remove(__token);
         };
         return {
                  init: __init,
                  dispose: __dispose
         }
}();
​

转载于:https://www.cnblogs.com/xkzy/p/3870322.html