同步Ajax請求「鎖定」瀏覽器

我有幾個jQuery Ajax請求，它們必須是同步的，但它們會一直鎖定/凍結瀏覽器，直到收到響應。我的主要問題是，直到收到響應，我必須顯示一個旋轉圖標，但由於凍結，微調不顯示，即使它奇蹟般地不動畫。同步Ajax請求「鎖定」瀏覽器

這是顯示旋轉器和發送該請求的事件：

$(document).on('click', '#open-button', function() { 

    var input = "some text"; 
    var wrapper = $('#wrapperWindow'); 
    wrapper.children().animate({ 
     opacity: 0 
    }, 500); 
    wrapper.children().remove(); 
    wrapper.append('<div id="loading-spinner" style="display:none;"></div>'); 
    var spinner = $('#loading-spinner'); 
    spinner.css({ 
     backgroundImage: 'url("img/loading.gif")', 
     opacity: 0 
    }); 
    spinner.show(); 
    spinner.animate({ 
     opacity: 1 
    }, 500); 

    var dataForTab = requestData(input); //<-- the request 

    if (dataForTab.length > 0) { 
     //do stuff 
    } 

});

請求：

function requestData(input) { 

    var result = null; 

    $.ajax({ 
     async: false, 
     type: "POST", 
     url: "/some/url?input=" + input, 
     dataType: "json", 
     retryLimit: 3, 

     success: function (json) { 
      result = json; 
     }, 

     error: function (xhr, err) { 
      console.log(xhr); 
      console.log(err); 
     } 
    }); 

    return result; 
}

直到請求返回所接收的JSON數據，一切都停止移動。我該如何解決這個問題？

來源

2014-10-22 Dropout

你不能....修復它的方法是使用異步處理 – 2014-10-22 08:52:55

看看 - http://stackoverflow.com/questions/14220321/how-to-return-the-response- from-an-ajax-call – 2014-10-22 08:53:30

[$ .ajax（）.async]（http://api.jquery.com/jQuery.ajax/） - *請注意，同步請求可能會臨時鎖定瀏覽器，禁用任何操作請求已激活* – 2014-10-22 08:54:14

這是同步請求的本質，它們是鎖定的。您可能想嘗試將請求移至web worker。下面是一個example（不使用XHR，但它可以給你一個實現想法）

網絡工作者在一個單獨的文件中實現，該腳本可以看起來像：

onmessage = function (e) { 
var result = null; 

    $.ajax({ 
     async: false, 
     type: "POST", 
     url: "/some/url?input=" + input, 
     dataType: "json", 
     retryLimit: 3, 

     success: function (json) { 
      result = json; 
      postMessage({result: result}); 
     }, 

     error: function (xhr, err) { 
      postMessage({error: err}); 
     } 
    }); 

}

來源

2014-10-22 08:56:35 KooiInc

我只是通讀它而已。看起來這可能是一個解決方案。謝謝！ – Dropout 2014-10-22 08:59:03

我可以將工作人員實施爲匿名功能嗎？你知道..像'新工人（函數（）{...}）;' – Dropout 2014-10-22 09:08:47

答案：http://stackoverflow.com/questions/5408406/web-workers-without-a-separate-javascript-file – Dropout 2014-10-22 09:16:51

根據您的使用情況，你可以使用類似於

task.js簡化的接口來獲取CPU密集型代碼在所有內核上運行（node.js的，和網絡）

一個例子是

// turn blocking pure function into a worker task 
const syncWorkerRequest = task.wrap(function (url) { 
    // sync request logic 
}); 

// run task on a autoscaling worker pool 
syncWorkerRequest('./bla').then(result => { 
    // do something with result 
});

你不應該執行該操作，除非你需要做一些繁重的數據處理，請使用異步請求。

來源

2016-10-29 05:48:44

同步Ajax請求「鎖定」瀏覽器

回答

相關問題