javascript - 如何在 Backbone 中使用 setTimeout()？

Question

如何在 Backbone 模型中使用 setTimeout()？我有下一个代码:

var ContentModel = Backbone.Model.extend({
URL: "http://localhost/example.php",    
requestType: "POST",
dataType: "json",
data: "", //Set the value outside the model

startSend: function (Data) { 
           //
},
reply: function (Data) { 
    var dataJson = eval(Data);              
    console.log(dataJson);
    setTimeout(this.ajaxRequest(),4000);
},
problems: function (Data) { 
    //
},
ajaxRequest: function () {
    $.ajax({
        async:true,
        type: this.requestType,
        dataType: this.dataType, 
        url: this.URL,
        data: this.data,
        beforeSend:this.startSend,
        success: this.reply,
        timeout:4000,
        error:this.problems 
    });

}       

});

或者我试过:

setTimeout(function(){
               //ajax code
               },4000);

但结果是一样的。 setTimeout() 不起作用。请求只运行一次。

Answer 1

有些事情不对劲。首先，这一行:

setTimeout(this.ajaxRequest(),4000);

应该是:

setTimeout(this.ajaxRequest, 4000);

第一行代码执行 ajaxRequest 函数并将结果(undefined)传递给 setTimeout。这意味着 ajaxRequest 函数将执行一次，但为时过早。后一行做你想要的，即将函数自身传递给setTimeout，ajaxRequest将在4秒后被调用。

但这还不够。 ajaxRequest函数执行时，this上下文的值不正确。当您调用 setTimeout 时，回调的上下文设置为 window。您可以通过回调函数中的 console.log(this) 来验证这一点。

要修复它，您需要绑定(bind)函数的上下文。由于您使用的是 Backbone，因此您还已经加载了 underscore.js。使用_.bind应该这样做:

setTimeout(_.bind(this.ajaxRequest, this), 4000);

编辑:

仔细想想，可能还有别的问题。当 ajax 调用成功或失败时，reply 或 problems 函数可能会遭受与 ajaxRequest 相同的上下文丢失。但即使有，也很容易修复。

除了调用 _.bind 之外，最简单的方法是调用 _.bindAll在您的 Backbone 模型构造函数中。

initialize: function() {
  _.bindAll(this, 'ajaxRequest', 'reply', 'problems');
}

当您调用 _.bindAll 时，underscore 保证每次调用模型中列出的任何方法时，this 上下文变量都指向模型本身，除非特别绑定(bind)到其他东西。