javascript - 在 knockout 应用程序中使用 setInterval 进行轮询实现？

Question

我正在尝试使用 setInterval 实现简单的轮询机制。我有一个 View 模型如下:

define([ 'knockout', 'jquery',
    ], function ( ko, $) {
    function ViewModel() {
        var self = this;
        //setInterval( function() {
        $.ajax({url: "", async: false,timeout: 3000, success: function (data) {
           // some operation

            }, dataType: "json"});
      //}, 3000);

    }
    return ViewModel;


 });

到目前为止，它工作正常，ajax 调用返回数据并执行操作。如何使用 setInterval 以便 ajax 调用在一定时间间隔后返回数据，以便更新 ViewModel 并在 UI 中刷新数据？如果我取消注释 setInterval block ，那么 ViewModel 不会返回到 DOM。我认为 setInterval 是异步的。任何解决方案都值得赞赏。

Answer 1

基本上，将 setInterval 与异步代码一起使用并不是最好的方法。最好在前一个请求完成后使用 setTimeout 来安排新的请求。

如果您确保不能同时有两个待处理请求，则可以通过成功处理程序中的 self 访问您的 ViewModel 实例，并且您不会担心旧的/其他请求会撤销您的更改。

这是一个例子:

function ViewModel() {
  var self = this;

  var INTERVAL = 5000;
  var timeout = null;
  var currentReq = null;
  
  this.observableProp = ko.observable("empty");

  var fetchNewData = function() {
    currentReq = $.ajax( /* options */);
    
    currentReq
      .done(processNewData)
      .always(scheduleNewDataFetch);
  };

  var processNewData = function(data) {
    // self refers to your current ViewModel instance
    // set observable properties using self.prop(data)
    self.observableProp("data");
  };
  
  var scheduleNewDataFetch = function() {
    if (currentReq) {
      currentReq.abort();  
    }
    
    if (timeout) {
      clearTimeout(timeout);  
    }
    
    currentReq = null;
    timeout = setTimeout(fetchNewData, INTERVAL);
    
  };

  fetchNewData(); // Starts the update loop
}