在點擊一個按鈕時設置jQuery AJAX調用的延遲

我有下面的代碼，它在我點擊一個按鈕時執行。在點擊一個按鈕時設置jQuery AJAX調用的延遲

當用戶點擊一個按鈕時，我需要在瀏覽器中顯示進度條/等待圖像5秒鐘。如何設置超時，如何顯示進度條/頁面等待頁面圖像時，上的一個按鈕

$("#btnSubmit").click(function(){ 
var formData = $("form").serialize();   
    $.ajax({ 
    url: 'cgi-bin/config', 
    type: 'POST', 
    data: formData, // An object with the key 'submit' and value 'true;   
    success: function (result) { 
     console.log(result); 
    }, 
    failure: function() { 
     alert("Ajax request failed!!!"); 
    },error: function() { 
     alert("Ajax request failed to update data!!!"); 
    }   
    });  
});

來源

2014-03-07 sree

你需要惹惱你的用戶？ :) –

我也有同樣的感覺，但它在那裏的要求:) – sree

你打算如何顯示*進度條*？使用一個UI庫或什麼？ – DontVoteMeDown

使用beforeSend用戶點擊和完整

$("#btnSubmit").click(function(){ 
    var formData = $("form").serialize();   
    $.ajax({ 
    url: 'cgi-bin/config', 
    type: 'POST', 
    data: formData, // An object with the key 'submit' and value 'true;   
    success: function (result) { 
     console.log(result); 
    }, 
    failure: function() { 
     alert("Ajax request failed!!!"); 
    },error: function() { 
     alert("Ajax request failed to update data!!!"); 
    }, 
    beforeSend: function(){ 
     $('.progress').show(); 
    }, 
    complete: function(){ 
     $('.progress').hide(); 
    }   
    });  
});

HTML

<div class="progress" style="display:none;"><img src="loading.gif" />Loading...</div>

來源

2014-03-07 12:53:29 Shin

WTH？這不會運行！你會得到一個語法錯誤。 – DontVoteMeDown

這隻會發送之前，但我需要設置超時.. ，我需要顯示進度圖像在瀏覽器中間 – sree

@sree我認爲你需要在ajax請求完成後隱藏進度圖像，對吧？ – Shin

$("#btnSubmit").click(function(){ 
    var startTime = Date.now(), 
    // finish function is called at the end - when request is completed and at least 5s passed 
    // result will be null on error or whatever was received by success callback 
    finish = function (result) { 
    if (result === null) { 
     // probably error, handle it.. 
    } else { 
     // handle result 
    } 
    $('#progress').hide(); 
    }, 
    checkDone = function (result) { 
    var r = Date.now() - startTime; // time taken by request 
    if (r < 5000) { // if less than 5s then set timeout for remaining time 
     setTimeout(function() { 
     finish(result); 
     }, 5000 - r); 
    } else { // if there was already 5s finish immediately 
     finish(result); 
    } 
    }, 
    formData = $("form").serialize(); 
    $('#progress').show(); 
    $.ajax({ 
    url: 'cgi-bin/config', 
    type: 'POST', 
    data: formData, // An object with the key 'submit' and value 'true; 
    success: function (result) { 
     console.log(result); 
     checkDone(result); 
    }, 
    failure: function() { 
     alert("Ajax request failed!!!"); 
     checkDone(null); 
    }, 
    error: function() { 
     alert("Ajax request failed to update data!!!"); 
     checkDone(null); 
    } 
    });  
});

進步DIV例如（只是把身體）：

<div id="progress" style="display:none;position:absolute;z-index:99999;top:0;left:0;width:100%;height:100%;opcity:0.7;background:url('/img/progress.gif') 50% 50% no-repeate #000"></div>

來源

2014-03-07 13:00:53 lupatus

我能解決我的代碼鏈接jsfiddle.net/joshdavenport/Qw6uv/4，這工作得很好..

來源

2014-03-11 11:59:42 sree

在點擊一個按鈕時設置jQuery AJAX調用的延遲

回答

相關問題