setInterval与setTimeout的区别

时间 2019-11-29

标签 setinterval settimeout 区别繁體版

原文原文链接

一.setInterval与setTimeout的区别

setIntervalhtml

setInterval()方法可按照指定的周期来调用函数或者计算表达式（以毫秒为单位）函数

语法：学习

setInterval(函数表达式，毫秒数)；spa

setInterval()会不停的调用函数，直到clearInterval()被调用或者窗口被关闭，由 setInterval()返回的ID值可用做clearInterval()方法的参数。code

setTimeouthtm

setTimeout()方法用于在指定毫秒数后再调用函数或者计算表达式（以毫秒为单位）blog

语法：ip

setTimeout(函数表达式，毫秒数)；utf-8

setTimeout()只执行函数一次，若是须要屡次调用能够使用setInterval(),或者在函数体内再次调用setTimeout()it

区别

　　经过以上分析能够看出，setTimeout与setInterval的主要区别是:

　　setTimeout()方法只运行一次，也就是说当达到设定的时间后就出发运行指定的代码，运行完后就结束了，若是还想再次执行一样的函数，能够在函数体内再次调用setTimeout()，能够达到循环调用的效果。

　　setInterval()是循环执行的，即每达到指定的时间间隔就执行相应的函数或者表达式，是真正的定时器。

二.setTimeout()的用法

　　先写个最简单的demo，以下：

 1 <!DOCTYPE html>
 2  <html lang="en">
 3      <head>
 4            <meta charset="utf-8">
 5            <script>
 6                   setTimeout("alert('hello')",2000);
 7            </script>
 8      </head>
 9     <body>
10     </body>
11 </html>

页面会在停留2秒以后弹出对话框,注意setTimeout不会自动重复执行！

固然，setTimeout也能够执行function，还能够不断重复执行！

你能够看到h1中的文本数字在一秒一秒地递增！

更加灵活的是，你还能够指定重复执行的次数，以下：

if判断中的数字，是用来限制重复执行次数的条件。

三.clearTimeout()

要使用clearTimeout()，须要咱们设定setTimeout()时，给予这setTimeout()一个名称, 这名称就是timeoutID ，咱们叫停时，就是用这 timeoutID 来叫停

 1  <!DOCTYPE html>
 2   <html lang="en">
 3       <head>
 4             <meta charset="utf-8">
 5             <script>
 6                   var timeId= setTimeout("alert('hello')",2000);
 7                    clearTimeout(timeId);
 8             </script>
 9       </head>
10      <body>
11      </body>
12  </html>

原计划1秒后弹出的警示框，被天然叫停了。

本人正在学习和摸索中，若有错误，欢迎指正！