Javascript多个setIntervals

Question

我有一种情况，我有一个基于setInterval的代码来检查ajax调用返回的值。 像这样：

var processInterval = setInterval(function () {

    var processResult = getVideoStatus(data.file_name);

    console.log(processResult);

    if (processResult === "ready") {

        clearInterval(processInterval);
        //Logic

    }

}, 1000);

至于getVideoStatus函数，它是：

var getVideoStatus = function () {

    var result = null;
    jQuery.ajax({
        url: 'someurl',
        type: 'GET',
        dataType: 'html',
        success: function (response) {

            result = response;

        }
    });

    var statusTimeout = setInterval(function () {

        if (result != null) {

            clearInterval(statusTimeout);
            alert(result);
            return result;

        }

    }, 100);


}

我试图在getVideoStatus函数中执行的操作是使其仅在ajax调用完成且result不为null时才返回值。 我看到它确实返回/警告正确的值，但是当我尝试console.log(processResult) ，它根本不记录任何内容。

我认为这与第一个间隔有关，因为getVideoStatus似乎返回的值还可以。 有逻辑问题吗？

Answer 1

您选择的方法并不理想。 只需使用适当的Promise / thenable API，该API可在数据可用时提供回调。 在您的情况下：

var getVideoStatus = function () {
    return jQuery.ajax({
        url: 'someurl',
        type: 'GET',
        dataType: 'html'
    });
}

getVideoStatus().then(function(result) {
    console.log(result);
});

好处：更干净，更可预测的代码行为。

Answer 2

您的问题是getVideoStatus不返回任何内容。 所以这段代码：

var processResult = getVideoStatus(data.file_name);

无法正常工作。 有一种更好的方法来做您想要的。 像这样使用jQuery Deferreds：

var getVideoStatus = function(){
return jQuery.ajax({
    url : 'someurl',
    type: 'GET',
    dataType: 'html',
    success : function (response) {

        result =  response;

    }
  });
}

var deferred = getVideoStatus(data.file_name);

deferred.then(
  function success(data) {
    // do something here, call came back w/ data
  },
  function error() {
    // handle error
  }
);

您没有得到的是AJAX请求是异步的。 该代码将不会一步一步地继续运行-而是，浏览器将运行请求，然后再返回，您可以继续运行，但是不会回到开始请求的位置。

您可以使类似的东西正常工作，但是使用jQuery的人都不会这样做，而且很复杂-您需要使用setInterval并检查XHR请求的就绪状态。 jQuery为您完成了所有这些工作。 因此，从此开始，然后如果想实现自己的方法，请阅读其工作原理。