javascript – 等待处理事件以继续执行触发事件的函数.

前端之家收集整理的这篇文章主要介绍了javascript – 等待处理事件以继续执行触发事件的函数.前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在寻找一个优雅,高效的解决方案来解决我的问题:

我有这个带有许多组件的webapp;

一个主要组成部分包括许多随时间增长/发展的新增内容.

这个主要组件有一个功能,在实际执行它应该做的事情之前,它会触发事件,然后插件可以监听.

dostg : function () {
   $doc.trigger('beforedo');

   //do stuff but after event is handled by the addons ?

}

插件代码

$doc.on('beforedo',function(e) {
   //do before addon stuff
}

现在那些做事之前可能涉及ajax请求或任何需要一些处理时间的事情.

我可以在ajax请求上增加一个计数器并等待它降到零,但是我想要的是一个等待所有处理程序完成工作的解决方案(因此,无论在这些插件中做什么,它都能正常工作)处理程序).

是否有一些奇迹解决方案来做到这一点,或者我必须忘记在这种情况下的事件,并采取另一种方式(迭代的函数数组,插件将新函数推入数组)?

感谢您的专业知识!

——-编辑后的编辑

向@xbonez& @Sergiu Paraschiv,我应该在提供赏金之前用我现在使用的解决方案编辑问题(解决方案我并不完全满意,因此是赏金).

//app
var $doc = $(document.body); 


//component    
$doc.on({
    wait: function (e) { ++$doc.component.handleinprogress; },addonready: function () {
        --$doc.component.handleinprogress;
        if ($doc.component.handleinprogress==0) $doc.trigger('readyfordo');
    },readyfordo: function () {
        //do stuff after event has been handled by the addons 
    }        
});

$doc.component = {
    handleinprogress: 0,dostg: function () {

        $doc.component.handleinprogress = 0;
        $doc.trigger('beforedo');
    }
};

//in component addon files

$doc.on('beforedo',function (e) {

    $doc.trigger('wait');
    //do addon stuff
    $doc.trigger("addonready");
}

我对这个解决方案不满意,因为即使我不需要在插件中执行操作,我仍然需要添加处理程序来触发addonready(至少在其中一个插件中 – >所以要么我失去灵活性添加/删除组件中的插件而不用担心readyfordo是否被触发,要么我必须在每个插件中包含处理程序 – 大多数是-75% – 什么也没有.

解决方法

要在执行某些代码之前等待所有处理程序完成,您应该使用jQuery的延迟API.你可以这样做:
$.when($.ajax("/page1.PHP"),$.ajax("/page2.PHP")).done(function(a1,a2){
  // only executes after both ajax calls have completed
});

此外,jQuery的trigger允许您传递额外的参数.传递一个将成为回调函数函数.

您的最终代码应如下所示:

$doc.trigger('beforedo',function() {
  // anything here only executes after the event has been handled
});


$doc.on('beforedo',function(e,callback) {
   //do before addon stuff
  $.when($.ajax("/page1.PHP"),a2){
      // at this point,all your AJAX calls have completed
      // call the callback function
      callback();
  });
}

如果需要,当你调用callback()时,你甚至可以传递你可能需要作为参数传递的任何结果.因此,也要更改.trigger()调用中的函数签名.

扩展我留下的评论,如果您愿意,可以使用常用的加载器功能

$.when(load("page1"),load("page2")).done(function(){
 // ...
});

function load(file) {
  // return the $.ajax promise
  return $.ajax(file);
}

看到:

jQuery deferred
jQuery.when()
jQuery.trigger

猜你在找的JavaScript相关文章