JS定时器setTimeout和setInterval介绍

JavaScript 定时器，有时也称为“计时器”，用来在经过指定的时间后执行某些任务。avaScript 中提供了两种方法来设置定时器，分别是 setTimeout() 和 setInterval()。

window.setTimeout - Web API 接口参考 | MDN

setInterval() - Web API 接口参考 | MDN

setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式，只会执行一次；而setInterval()方法则可以按照指定的周期（单位为毫秒）来重复执行函数或表达式，直到clearInterval把它清除或者手动关闭浏览器窗。

注意setTimeout()只执行一次，setInterval()可以执行多次。

setTimeout()语法格式如下：

setTimeout(function[, delay, arg1, arg2, ...]);

setTimeout(function[, delay]);

setTimeout(code[, delay]);

参数说明：

function：一个函数（通常使用匿名函数），其中定义了定时器中要执行的代码；

code：字符串类型的代码，这些代码会在定时器到期后被编译执行，出于安全考虑不建议使用；

delay：可选参数，定时器在执行的其中代码之前，要等待的时间，单位为毫秒（1秒 = 1000毫秒），如果省略此参数，则其默认值为 0；

arg1、arg2、...、argN：要传递给函数的参数。

提示：setTimeout()只执行一次，但可以让被执行的代码里面自身再次调用 setTimeout() 方法已达到多次执行的目的。

setInterval()语法格式如下：

setInterval(function, delay, [arg1, arg2, ...]);

setInterval(code, delay);

参数说明：

function：一个函数（通常使用匿名函数），其中定义了定时器中要执行的代码；

code：字符串类型的代码，这些代码会在定时器到期后被编译执行，出于安全考虑不建议使用；

delay：可选参数，定时器在执行的其中代码之前，要等待的时间，单位为毫秒（1秒 = 1000毫秒），如果省略此参数，则其默认值为 0；

arg1、arg2、...、argN：要传递给函数的参数。

请注意，每次调用回调函数之间经过的实际时间可能会比给定的 delay 长，在浏览器中，setTimeout()/setInterval() 的每调用一次定时器的最小间隔是 4ms，这通常是由于函数嵌套导致（嵌套层级达到一定深度），或者是由于已经执行的 setInterval 的回调函数阻塞导致的。

setTimeout()和setInterval()的返回值是正整数，表示定时器的编号。需要注意的是setTimeout()和 setInterval()共用一个编号池，技术上，取消该定时器clearTimeout()和clearInterval()可以互换。但是，为了避免混淆，不要混用取消定时函数，而要用clearTimeout()方法取消先前通过setTimeout()建立的定时器；用clearInterval()方法取消先前通过setInterval()设置的重复定时器。

下面用setInterval实现计数器功能，每秒（1000ms)累加1一次，先看效果：

源码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用setInterval实现计数器功能</title>
<style>
div{height: 30px;
}
</style>
<script>var t;var k = 0;function start() {k += 1;document.getElementById("num").innerHTML = k;document.getElementById("num2").value = k;}function startCount() {t = setInterval(start, 1000);}function stopCount() {clearTimeout(t);}</script>
</head>
<body>
<p>用setInterval实现计数器功能，每秒（1000ms)累加1一次</p>
<div id="num"> </div>
<input type="text" id="num2">
<input type="button" onclick="startCount()" value="开始">
<input type="button" onclick="stopCount()" value="停止">
</body>
</html>

下面给出循环逐字输出字符串的例子，先看效果图：

源码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>setInterval测试</title>
<script>
var str = "循环逐字输出本句！";
var seq = 0;
var second=1000; //间隔时间1秒钟
function scroll() {msg = str.substring(0, seq+1);document.getElementById('word').innerHTML = msg;seq++;if (seq >= str.length) seq = 0;
}
</script>
</head>
<body onload="setInterval('scroll()',second)">
<h2 id="word"></h2>
</body>
</html>

更多的例子可见，JavaScript定时器示例https://blog.csdn.net/cnds123/article/details/120567946

JS定时器setTimeout和setInterval介绍相关推荐

js定时器setTimeout和setInterval用法及区别，清除定时器的使用
setTimeout和setInterval使用方法定时器两个参数,第一个是执行代码,第二个是执行时间.执行时间自己随便设置,执行代码有以下几种方式传入: 1.匿名函数形式传入 setTimeout ...
定时器setTimeout和setInterval的简单应用
本文简单利用定时器setTimeout和setInterval举了两个小栗子:定时炸弹和1-100递增代码如下: <!DOCTYPE html> <html lang=" ...
js中的两种定时器setTimeout()和setInterval()怎么用
JS有两种定时器分别是setTimeout()和setInterval(),这两个区别就是setTimeout()是一次性的定时器,而setInterval()是循环的定时器. 定时器的精度 js中的 ...
js中的定时器 setTimeout()和setInterval() (保姆级教程)
1 两种定时器 window 对象给我们提供了 2 个非常好用的方法-定时器. setTimeout() setInterval() 2 setTimeout() 定时器 window.setTime ...
前端开发：JS中setTimeout和setInterval的对比使用
前言在前端开发过程中,关于计时器的使用是非常常用的知识点,也是非常重要的,尤其是需要规定延迟多久之后再去执行某个操作.在JS的计时器使用中有setTimeout和setInterval,二者都是定时 ...
js中setTimeout的用法和JS计时器setTimeout与setInterval方法的区别和confirm方法
setTimeout()在js类中的使用方法 setTimeout (表达式,延时时间) setTimeout(表达式,交互时间) 延时时间/交互时间是以豪秒为单位的(1000ms=1s) setTi ...
关于定时器setTimeout与setInterval的定时与关闭操作
setTimeout与setInterval setTimeout只执行一次,主要广泛用于在指定的毫秒(1000ms=1s)后调用函数等.而setInterval则是在相隔指定的周期内循环执行.所以s ...
js定时器setTimeout、clearTimeout、setInterval使用和区别
setTimeout(调用函数,[延迟的毫秒数]): 用于设置一个定时器该定时器在定时器到期后执行调用函数案例:3秒后显示log打印结果 <script>//方法一// setTime ...
定时器 setTimeout、setInterval详解
定时器:按我个人理解来说就是固定某个时间后,时间到了,就提醒我时间到了. 程序中的定时器:相当于倒计时,也相当于计时器.作用是在设定的某个时间后,执行特定的方法. 我们先来了解一下setTimeout ...

JS定时器setTimeout和setInterval介绍

JS定时器setTimeout和setInterval介绍

JS定时器setTimeout和setInterval介绍相关推荐

最新文章

热门文章