JS中的setTimeout和setInterval

最新推荐文章于 2024-05-29 15:14:06 发布

chelen_jak

最新推荐文章于 2024-05-29 15:14:06 发布

阅读量916

点赞数

分类专栏： JavaScript 实用

实用同时被 2 个专栏收录

738 篇文章

订阅专栏

JavaScript

311 篇文章

订阅专栏

本文详细介绍了JavaScript中的setTimeout和setInterval两个定时器的区别及其使用方法，包括如何传递参数、实现循环执行及技巧分享。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自：http://blog.sina.com.cn/s/blog_7d892a6701017yq8.html (已加以整理）

一、setTimeout和setInterval的区别

setTimeout (表达式,延时时间)
setInterval(表达式,交互时间)
延时时间/交互时间是以豪秒为单位的(1000ms=1s)

setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次
setInterval 在执行时,它从载入后,每隔指定的时间就执行一次表达式,直到使用clearInterval来终止它或窗口关闭

cleartimeout() 关闭执行的setTimeout。如：

<script type="text/javascript">
var c=0;
var t;
function timedCount()
  {
  document.getElementById('txt').value=c;
  c=c+1;
  t=setTimeout("timedCount()",1000);	//个人理解：创建一个setTimeOut对象赋给t 
  }
function stopCount()
  {
  clearTimeout(t);			//个人理解：释放setTimeOut对象t 
  }
</script>

clearInterval() 关闭执行的setInterval。如：
下面这个例子将每隔 50 毫秒调用 clock() 函数。您也可以使用一个按钮来停止这个 clock：

<html>
<body>

<input type="text" id="clock" size="35" />
<script language=javascript>
var int=self.setInterval("clock()",50)
function clock()
  {
  var t=new Date()
  document.getElementById("clock").value=t
  }
</script>
</form>
<button onclick="int=window.clearInterval(int)">
Stop interval</button>

</body>
</html>

不过setTimeout也能实现setInterval相同的功能（循环执行）

function load()
{
    alert("hello");
    setTimeout(load,10);   //每隔10ms执行一次自身，当然还要算上函数本身的执行时间
}

function load()
{
    alert("hello");
}
setInterval(load,10);

window对象有两个主要的定时方法，分别是setTimeout 和 setInteval 他们的语法基本上相同，但是完成的功能取有区别。
setTimeout方法是定时程序，也就是在什么时间以后干什么。干完了就拉倒。
setInterval方法则是表示间隔一定时间反复执行某操作。

二、setTimeout的传参问题
我们在使用windows里的定时器setTimeout时，有时会需要参数传入，可是单纯的把参数写进去发现程序根本就执行不了。
这时我们可以使用function(){ method(param);}

示例程序如下：

function changesrc(url)
{
    img1.src=img.src;
    preload(url);
    t=setTimeout(function(){changesrc(url);},10); 
}

三、setTimeout使用技巧
参考： http://www.2cto.com/kf/201207/142102.html

建议将setTimeout单独设置为一个函数。如：

function delayRun(code, time) {
   var t = setTimeout(code, time);
}

这样，在需要让某段代码延时执行的时候，只需在这段代码前加入这个函数就可以了。如：
onmouseover = delayRun("setTab(0,0)", 500)
其中setTab是一个自定义的函数。如果以后不想让setTab延时执行，则去掉语句中的delayRun相关的代码即可，
改为：onmouseover=setTab(0, 0) 就可以了。
这种写法避免每一个需要延时的地方都写一段setTimeout的代码，只需要直接调用就可以了，很方便。也节省了代码的量。