如何在後臺執行ajax請求和html元素更新？

我有三個元素的html窗體 - 按鈕啓動和停止和文本區域。一旦按下開始按鈕，我想要執行多個ajax請求，並且一旦接收到更新文本區域的結果，一旦停止被按下，應該停止處理ajax請求。如何在後臺執行ajax請求和html元素更新？

我試圖做類似如下：

$(document).ready(function(){ 
    var inProgress = false; 

    $("#stop").click(function() { 
    inProgress = false; 
    }); 

    $("#start").click(function() { 
    inProgress = true; 
    while (inProgress) { 
     $('#textarea').html($('#textarea').val()+sometext+'\n'); 
     $.ajax({url: 'http://example.com'}) 
     .done(function(data, textStatus, jqXHR) { 
     $('#textarea').html($('#textarea').val()+someresult+'\n'); 
     }); 
    } 
    });

但預期它不工作 - 瀏覽器選項卡掛起。我的代碼有什麼問題？

來源

2014-09-26 LA_

'而（INPROGRESS）'永不停止。你需要'輪詢'inProgress'變化！ – loveNoHate 2014-09-26 13:28:00

您的瀏覽器卡在永無止境的循環中 – 2014-09-26 13:28:03

您的實際需求是什麼？ – 2014-09-26 13:30:16

不要使用while循環。你應該以異步的方式完成它：在.done函數結束時，再放一個異步的ajax調用。

// other stuff goes here 

function doRequest() { 
     $.ajax({url: 'http://example.com'}) 
     .done(function(data, textStatus, jqXHR) { 
     $('#textarea').html($('#textarea').val()+someresult+'\n'); 

     if (inProgress) doRequest(); 
     }); 
} 

$("#start").click(function() { 
    inProgress = true; 
    $('#textarea').html($('#textarea').val()+sometext+'\n'); 
    doRequest(); 
});

來源

2014-09-26 13:28:19 kien

好吧，既然$就默認是異步的，你這是XHR（AJAX調用）的loooot！ ;-)

試試這個：

$(document).ready(function(){ 
    var inProgress = false; 

    $("#stop").click(function() { 
    inProgress = false; 
    }); 

    $("#start").click(function() { 
    inProgress = true; 
    refresh(); 
    }); 

    function refresh() {  
     $('#textarea').html($('#textarea').val()+sometext+'\n'); 
     $.ajax({url: 'http://example.com'}) 
      .done(function(data, textStatus, jqXHR) { 
      $('#textarea').html($('#textarea').val()+someresult+'\n'); 
      if (inProgress) refresh(); 
      }); 
    } 
});

來源

2014-09-26 13:31:09 laruiss

大概是因爲瀏覽器正在忙於處理請求，它可以不聽其他事件。嘗試將代碼放入函數中，然後使用合理的超時時間，然後使用

setTimeout(function_reference, timeoutMillis);

。

見該代碼作爲一個例子：

function startTime() { 
    var today = new Date(); 
    var h = today.getHours(); 
    var m = today.getMinutes(); 
    var s = today.getSeconds(); 
    // add a zero in front of numbers<10 
    m = checkTime(m); 
    s = checkTime(s); 
    document.getElementById("txt").innerHTML = h+ ":" + m + ":" + s; 
    t = setTimeout(function(){startTime()}, 500); 
} 

function checkTime(i) { 
    if (i<10) { 
     i = "0" + i; 
    } 
    return i; 
}

來源

2014-09-26 13:33:36 Bonomi

如何在後臺執行ajax請求和html元素更新？

回答

相關問題