主干事件触发顺序

Backbone events firing order

本文关键字：顺序 事件      更新时间：2023-09-26

>假设我有这个：

view1.listenTo(model, 'change', function(){
    console.log('test1');
});
view2.listenTo(model, 'change', function(){
    console.log('test2');
});

是否保证"test1"始终首先打印？

我不知道

听众以不同的方式工作的任何情况。我已经阅读了 backboneJs 代码以确保，并且我已经看到 listenTo 在数组中推送回调。触发事件时，它会循环包含事件回调的数组。

var triggerEvents = function (events, args) {
    var ev, i = -1, l = events.length, a1 = args[0], a2 = args[1], a3 = args[2];
    switch (args.length) {
        case 0: while (++i < l) (ev = events[i]).callback.call(ev.ctx); return;
        case 1: while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1); return;
        case 2: while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1, a2); return;
        case 3: while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1, a2, a3); return;
        default: while (++i < l) (ev = events[i]).callback.apply(ev.ctx, args);
    }
};

我想你可以确定它不会改变。事件总是以这种方式工作。当事件发生时（this.model.trigger（"change"） or this.model.set（"...））启动回调是为了定义它们，当回调启动时，执行将继续在模型修改的下一行中。

正如@Daniel所指出的，文档并没有说明任何关于事件排序的特殊信息。

根据我的个人经验，我从未见过事件以随机顺序触发。

这个工作演示证实了这一点。

演示代码：

   var Person = Backbone.Model.extend({ 
     initialize: function(){
            console.log("Welcome to this world");
        }
   });
  var person = new Person({ name: "Thomas", age: 67, child: 'Ryan'});
   var headerView = Backbone.View.extend({    
        initialize: function() {
             this.listenTo(person, 'change', function(){
                console.log('test1');
             });      
            this.listenTo(person, 'change', function(){
                console.log('test2');
             });      
             this.listenTo(person, 'change', function(){
                console.log('test3');
             });      
            this.listenTo(person, 'change', function(){
                console.log('test4');
             });      
             this.listenTo(person, 'change', function(){
                console.log('test6');
             });      
            this.listenTo(person, 'change', function(){
                console.log('test7');
             });      
        }        
     });
   new headerView();
setInterval(function(){
    person.unset('attr');
    person.set({'attr': 'value'});
},1000)

在当前的实现中，我会说是的。但是，文档没有说明这一点，并且可以随时更改。

相关文章：