如何将 setTimeout() 与 Backbone 一起使用？

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) 来验证这一点。

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

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

编辑：

想一想，可能还有另一个问题。当 ajax 调用成功或失败时，reply 或problems 函数可能会遭受与ajaxRequest 相同的上下文丢失。但如果有，它很容易修复。

最简单的方法是在您的 Backbone 模型构造函数中调用 _.bindAll，而不是在这些上调用 _.bind。

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

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

Answer 2

你不需要做任何特别的事情来使用setTimeout 和主干。在reply 函数中检查this 的范围。我猜this.ajaxRequest() 不在范围内。

Answer 3

您必须改用setInverval。

setInterval(this.ajaxRequest, 4000);

setTimeout 触发一次函数。

setInterval 触发每个 n 毫秒。

var interval = setInterval(this.ajaxRequest, 4000);

clearInterval 用于清除setInterval。

clearInterval(interval);

或者在你的ajax 上传递上下文参数：

$.ajax({
    ...
    context: this,
    ...
});