您的位置:首页> 前端教程> JS教程
文章导航

JavaScript setInterval()

2018-10-4 23:55| 作者: admin| 查看: 3223| 评论: 0|来自: 蚂蚁部落

本文将通过代码实例循序渐进详细介绍一下setInterval方法的应用。

方法的名称都会尽量做到名副其实,一定程度上能够做到见词达意的效果。

setInterval由set与interval构成,set具有"设置"意思,interval具有"间隔"的意思。

恰如其名,此方法用于为指定代码循环执行设置时间间隔,例如每隔1000毫秒执行一次指定代码。

特别说明:凡是属于window对象的方法都可以直接使用,无需使用window调用。

更多内容可以参阅JavaScript window 对象一章节。

语法结构一: 

[JavaScript] 纯文本查看 复制代码
let intervalID = setInterval(func, interval[, param1, param2, ...])

参数解析:

(1).intervalID:setInterval方法的返回值,作为此次setInterval方法调用的唯一标识。

(2).func:必需,将要被循环调用的回调函数。

(3).interval:必需,周期的时间跨度,以毫秒计算。

(4).paramN:可选,将要传递给func函数的参数。

语法结构二:

[JavaScript] 纯文本查看 复制代码
let intervalID = setInterval(codeStr, interval)

参数解析:

(1).intervalID:setInterval方法的返回值,作为此次setInterval方法调用的唯一标识。

(2).codeStr:必需,JavaScript代码字符串(不推荐使用此方式,原因与eval方法相同)。

(3).interval:必需,周期的时间跨度,以毫秒计算。

浏览器支持:

(1).IE浏览器支持此方法。

(2).edge浏览器支持此方法。

(3).谷歌浏览器支持此方法。

(4).opera浏览器支持此方法。

(5).火狐浏览器支持此方法。

(6).safria浏览器支持此方法。

代码实例如下:

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

  let intervalID = setInterval(done, 1000);

  bt.onclick = function () {
    clearInterval(intervalID);
  }

} 
</script> 
</head> 
<body> 
<div id="ant">0</div>
<input type="button" id="bt" value="停止定时器"/>
</body> 
</html>

上面代码实现数字每秒增加1的效果,代码分下如下:

(1).let intervalID = setInterval(done, 1000) ,done函数会被每间隔1000毫秒执行一次。

(2).done函数能够实现将数字写入div,然后将数字加1。

(3).intervalID是此次setInterval方法调用的唯一标识,每一次setInterval方法调用返回的标识不同。(4).clearInterval(intervalID),可以停止定时器函数的执行。

关于clearInterval用法可以参阅JavaScript clearInterval()一章节。

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

  let intervalID = setInterval("done()", 1000);

  bt.onclick = function () {
    clearInterval(intervalID);
  }

} 
</script> 
</head> 
<body> 
<div id="ant">0</div>
<input type="button" id="bt" value="停止定时器"/>
</body> 
</html>

方法的第一个参数可以是JavaScript代码字符串,每隔指定时间运行字符串中的代码。

代码是上述代码报错了,截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/04/235744mjjiv9aelnkplkl5.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

报错原因是,没有查找到done函数,这是因为如果第一个参数是字符串,那么将会在全局作用查找done函数。

代码修改如下:

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

  bt.onclick = function () {
    clearInterval(intervalID);
  }

} 
</script> 
</head> 
<body> 
<div id="ant">0</div>
<input type="button" id="bt" value="停止定时器"/>
</body> 
</html>

上述代码可以正常运行,将函数done放在全局作用域。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript"> 
window.onload = function () {
  let count = 0;
  let max = 20;
  let bt = document.getElementById("bt");
  function show(max) {
    if (count >= max) {
      clearInterval(flag);
      return;
    }
    document.getElementById("ant").innerHTML = count + 1;
    count = count + 1;
  }
  
  let intervalID = setInterval(show, 1000, max);
  bt.onclick = function () {
    clearInterval(intervalID);
  }
} 
</script> 
</head> 
<body> 
<div id="ant">0</div>
<input type="button" id="bt" value="停止定时器"/>
</body> 
</html>

上述代码为setInterval方法传递了第三个参数,这个参数会被传递给回调函数。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论

返回顶部