jQueryの遅延ポストデータのdiv

Question

に私はPOSTのページからデータを取得するjQueryのでは、この機能を持って、その後の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の変数は、経過した間隔の数を記録できるようにします。
• 遅延を定義するためにmilisecondsを使用します。ここでは、1秒（1000秒/ 1秒）を使用しています。

「読み込み」テキストを要素に配置するのではなく、要素にテキストを追加することで、少し動的にすることができます。
何楽しいかもしれないことのような効果を得るために、単語「ロード」に省略記号を追加することです：まず、各ドットを追加し、「ロード」に初期値を設定し

​​

-

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

を

あなたはまた、単にアニメーションGIFを取り、使用することができると言いました_{そのlazy-programmers：P}

Answer 3

してみてください。

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

Answer 4

編集を：読み込み機能を追加するように更新。 setTimeoutメソッドを使用するJavaScript関数の実行を遅らせる

$("#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

。少しのように動作します：

に終わるでしょう、あなたの場合は

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); 
    } 
}