Javascript jQuery延迟将数据发布到div中

我在jQuery中有一个函数，它从带有POST的页面获取数据，然后将响应设置为div：

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

这是可行的，但是否有办法将进入

#result

标记的数据延迟约3秒

最后，我希望标签上写着：

---

“加载”、“加载…”和“加载…”各一秒钟，然后显示数据。

这是您应该使用的语法

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毫秒）

您可能希望实现的另一个附加功能是，不要简单地将“加载”文本放在元素中，而是通过向元素添加文本使其更具动态性。
有趣的是在单词“Loading”后面加上省略号以获得如下效果：

首先将初始值设置为“加载”，然后附加每个点-

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

也就是说，您也可以使用动画gif并使用：p

尝试：

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

试试这个：

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

---

编辑：更新以添加加载功能

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

---

要延迟JavaScript中函数的执行，请使用以下方法。工作原理有点像：

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

---

Geees-这要花很长时间才能加载-1您的

setInterval

永远不会被清除。在解释

setInterval

时，需要详细说明

clearInterval

函数@lix:哦，非常抱歉，我不是有意要写我实际写的东西，我有时也会混淆它们！删除-1，并向上投票：）+1对我来说有点太冗长了：P但它应该可以工作！

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