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為您完成了所有這些工作。 因此，從此開始，然后如果想實現自己的方法，請閱讀其工作原理。