setInterval()与setTimeout()区别

2018-8-27 00:48| 作者: admin| 查看: 294| 评论: 0|来自: 蚂蚁部落

首先强调一点,这两个方法之间的区别是非常明显的。

如果说对两者之间的差别还有所疑惑的话,只能说两个方法本身的用法还没有完全搞清楚。

相关阅读:

(1).JavaScript setInterval()一章节。

(2).JavaScript setTimeout()一章节。

下面本文再来介绍一下它们两者的区别,希望对初学者能够带来比较好的助益。

一.名称的区别:

这不是废话吗,不同方法的名字自然有区别。

其实没有这么简单,编程语言中,概念或者方法等命名都是与其功能相关联的。

比如作用域,一看就知道它是规定某些东西的作用范围的,replace方法自然是具有替代功能。

标题中的方法也不能免俗,从它们的名字就可以区分出它们的作用。

(1).setInterval是set+Interval的合成词。

(2).setTimeout是set+Timeout的合成词。

set具有设置设定的意思。

(1).Interval具有间隔和区间的意思,在这里我们就可以大体推测,setInterval方法与设定时间间隔有关。

(2).Timeout具有延迟或者延时的意思,那么很自然的推测,setTimeout方法与设定时间延迟有关。

二.方法的区别:

由前面的分析,我们已经大致得出两者的区别,下面直接给出结论:

(1).setInterval用来规定以指定的时间间隔重复执行指定代码,默认可以执行无数次。

(2).setTimeout用来规定延迟指定时间后执行指定代码,默认只会执行一次

三.代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script> 
window.onload=function(){
    let odiv=document.getElementById("ant");
    let num=0;
    setInterval(function(){
        num=num+1;
        odiv.innerHTML=num;
    },1000)
}
</script>
</head>
<body>
  <div id="ant">0</div>
</body>
</html>

上面的规定每隔1000毫秒执行一次匿名函数,数字会不断得到累加,并同时写入div。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script> 
window.onload=function(){
    let odiv=document.getElementById("ant");
    let num=0;
    setTimeout(function(){
        num=num+1;
        odiv.innerHTML=num;
    },1000)
}
</script>
</head>
<body>
  <div id="ant">0</div>
</body>
</html>

上面的代码数字只会增加一,因为setTimeout方法只是延迟1000好秒后执行一次匿名函数。

其实使用setTimeout方法也可以实现setInterval方法实现的数字累加效果。

代码修改如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script> 
window.onload=function(){
    let odiv=document.getElementById("ant");
    let num=0;
    function timedCount() {
      num++;
      odiv.innerHTML=num;
      timer=setTimeout(function(){
        timedCount()
      }, 1000);
   }
   timedCount();
}
</script>
</head>
<body>
  <div id="ant"></div>
</body>
</html>

上面的代码同样实现了计数功能,采用的是递归方式。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部