jQuery延迟将数据发布到div中

Question

我在jQuery中有这个函数,它从POST页面获取数据,然后将响应设置为div:

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

这是有效的,但无论如何都要延迟数据进入#result标签大约3秒？

最终我希望标签说:

"加载.","正在加载..."和"正在加载..."各一秒,然后显示数据.

Answer 1

这是您应该使用的语法.

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函数becuase,这正是我们想要做的 - 在执行代码之间设置间隔.
• 这clearInterval是非常自我解释 - 这结束并清除计时器.
• 对于每次迭代,我们减少的delayCounter变量,使我们可以跟踪有多少时间间隔已经过去了.
• 我们使用毫秒来定义延迟 - 这里我使用了1000秒,即1秒(1000毫秒,一秒钟).

您可能希望实现的另一个附加功能是,不是简单地在元素中放置"加载"文本,而是通过向其添加文本使其更具动态性.
可能有趣的是将省略号附加到单词"正在加载"以获得如下效果:

首先将初始值设置为"正在加载"然后追加每个点 -

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

_{那说你也可以采取动画GIF并使用那些懒惰的程序员 :P}