js设定延迟时间的函数

浏览数：37 / 时间：2015年06月09日

1.如果想要在执行一个js函数之前延迟一段时间应该怎么做？

答："setTimeout(‘update()‘,1000);"

其中update()函数就是延迟后执行的函数，后面的时间单位为ms。

实例一：

<script language="javascript">
    var i;// 第10行代码
     
    setTimeout("abc()",5000);
    function abc(){
        // 第11行代码以后的全部放在这个函数里
        alert(1);
    }
</script>

实例二：

<script>
var i=1;
var timeID=null;
function display()
{
  timeID = window.setInterval("delay()", 1000);
}
function delay()
{
  if(i<10) 
  {
    alert(i);
    i++;
  }
  else
  {
    window.clearInterval(timeID);
  }
}
display();
</script>

如果你能看看源代码，会发现我们的任务很简单，就是给文档增加一个 input 文本框，并聚焦和选中。请现在分别点击一下，可以看到，1 并没有能够聚焦和选中，而 2 可以。它们之间的区别在于，在执行

input.focus();

input.select();

时， 2 多了一个延迟时间为 0 的 setTimeout 的外围函数，即：

setTimeout(function(){

input.focus();

input.select();

}, 0);

按照 JavaScript: The Definitive Guide 5th 的 14.1 所说：

在实践中，setTimeout 会在其完成当前任何延宕事件的事件处理器的执行，以及完成文档当前状态更新后，告诉浏览器去启用 setTimeout 内注册的函数。

其实，这是一个把需要执行的任务从队列中跳脱的技巧。回到前面的例子，JavaScript 引擎在执行 onkeypress 时，由于没有多线程的同步执行，不可能同时去处理刚创建元素的 focus 和 select 事件，由于这两个事件都不在队列中，在完成 onkeypress 后，JavaScript 引擎已经丢弃了这两个事件，正如你看到的例子 1 的情况。而在例子 2 中，由于setTimeout可以把任务从某个队列中跳脱成为新队列，因而能够得到期望的结果。

这才是延迟事件为 0 的setTimeout的真正目的。在此，你可以看看例子 3，它的任务是实时更新输入的文本，现在请试试，你会发现预览区域总是落后一拍，比如你输 a, 预览区并没有出现 a, 在紧接输入 b 时， a 才不慌不忙地出现。其实我们是有办法让预览区跟输入框同步地，在此我没有给出答案，因为上面所说的，就是解决思路

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

js设定延迟时间的函数