jQuery的延遲後的數據爲DIV

Question

我在jQuery的這個函數，從POST頁獲取數據，然後將反應到一個div：

$("#go").click(function(){ 
    $.post("get.php", {p: 'abc'}, function(data){ 
    $('#result').html(data); 
    }); 
}); 

這工作，但反正是有延遲數據進入#result標籤約3秒？

最後，我想在標籤說：

「加載」，「中..」和「載入中...」一秒鐘每個，然後顯示數據。

Answer 1

試試這個：

$("#go").click(function(){ 
    // Show loader here 
    $.post("get.php", {p: 'abc'}, function(data){ 
     setTimeout(function() { 
      // Hide loader here 
      $('#result').html(data); 
     }, 3000); 
    }); 
}); 

Answer 2

這是您應該使用的語法。

var delayCounter = 3; 
var delayTimer = ''; 
delayTimer = setInterval(function(){ 
    if (delayCounter > 0){ 
    $('#result').html('Loading...'); 
    }else{ 
    $('#result').html(data); 
    clearInterval(delayTimer); 
    } 
    delayCounter--; 
},1000); 

這裏發生了什麼？

• 我們使用delayCounter變量來計算我們延遲動作的次數。它的起始值是3 - 所以我們將被「延遲」3次。
• delayTimer變量是計時器本身，將計數每個延遲。
• 我們使用setInterval函數，這正是我們想要做的 - 設置執行我們的代碼之間的時間間隔。
• clearInterval是相當自我解釋 - 這結束並清除計時器。
• 對於每次迭代，我們減少delayCounter變量，以便我們可以跟蹤已經通過了多少間隔。
• 我們使用毫秒來定義延遲 - 在這裏我使用了1000秒，這是1秒（1000秒）。

還有一個另外你可能想實現的是，而不是簡單地把「加載」文本在你的元素，讓它多一點通過附加文本，使其動態。
什麼可能是有趣的是追加省略號單詞「加載」到得到這樣的效果：

​​

首先設置初始值「加載」然後追加每一個點 -

$('#result').html($('#result').html()+'.'); 
// Loading 
// Loading. 
// Loading.. 
// Loading... 

_{這就是說你也可以只取GIF動畫，並使用該lazy-programmers：P}

Answer 3

嘗試：

setTimeout(function() { 
    $('#result').html(data); 
}, 3000); 

Answer 4

編輯：更新，增加了加載功能。

$("#go").click(function(){ 
    $.post("get.php", {p: 'abc'}, function(data){ 
    window.intervalTimer = setInterval(function(data) { 
     if (!window.timeoutCount) 
      window.timeoutCount = 0; 

      if (++window.timeoutCount > 3) { 
       $('#result').html(data); 
       clearInterval(window.intervalTimer); 
      } 
      else 
        $('#result').html("Loading..") 
    }, 1000); 
    }); 
}); 

Answer 5

要延遲在JavaScript中功能的執行使用setTimeout方法。作品有點像：

var doLater = setTimeout(function(){ 
alert('I like to wait 5 seconds'); 
},5000); //delay is stated in ms 

在你的情況，將在最後：

$("#go").click(function(){ 
    $.post("get.php", {p: 'abc'}, function(data){ 
    var wait = setTimeout(function(){$('#result').html(data);},3000); 
    }); 
}); 

Answer 6

$("#go").click(function(){ 
    $.post("get.php", {p: 'abc'}, function(data) { 
    $('go').html('Loading.'); 
    setTimeout("function() { 
     $('go').html('Loading..'); 
    }",1000); 
    setTimeout("function() { 
     $('go').html('Loading...'); 
    }",1000); 
    $('#result').html(data); 
    } 
}