基本概念

js 定时器有以下两个方法：

setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

setTimeout() ：在指定的毫秒数后调用函数或计算表达式。

setInterval()

语法

setInterval(code,millisec,lang)

参数	描述
code	必需。要调用的函数或要执行的代码串。
millisec	必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。
lang	可选。 JScript \| VBScript \| JavaScript

以下实例在每 1000 毫秒执行 clock() 函数。实例中也包含了停止执行的按钮:

<html>
<body><input type="text" id="clock" />
<script type="text/javascript">
var int=self.setInterval("clock()",1000);
function clock()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("clock").value=t;
}
</script><button onclick="int=window.clearInterval(int)">停止</button></body>
</html>

setTimeout()

语法

setTimeout(code,millisec,lang)

参数	描述
code	必需。要调用的函数后要执行的 JavaScript 代码串。
millisec	必需。在执行代码前需等待的毫秒数。
lang	可选。脚本语言可以是：JScript \| VBScript \| JavaScript

实例演示如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><p>点击按钮，在等待 3 秒后弹出 "Hello"。</p>
<button onclick="myFunction()">点我</button><script>
function myFunction()
{setTimeout(function(){alert("Hello")},3000);
}
</script></body>
</html>

常见问题

1、出现变量未定义（xxx is not defined）

常见为回调函数未定义

setTimeout方法是挂在window对象下的。《JavaScript高级程序设计》第二版中，写到：“超时调用的代码都是在全局作用域中执行的，因此函数中this的值在非严格模式下指向window对象，在严格模式下是undefined”。在这里，我们只讨论非严格模式。
//String Code
function test (){var a=1;setTimeout("a++",100);//a is not defined;
}
test();
//Lambda表达式
function test (){var a=1;setTimeout(function(){a++;console.log(a); //正常运行，却打印出结果2；},100);
}
test();
第一种形式（String Code）的情况，定时器汇总调用的是全局变量a,而上下文中定义的变量是局部变量，所以会报错；

第二种形式（函数形式）可以这么理解：在这里匿名函数的使用形成了一个闭包，从而能访问到外层函数的局部变量。只是这种闭包，跟常见的闭包不同，因为函数式放在setTimeout里面。

参考文章

https://www.runoob.com/w3cnote/js-timer.html

https://blog.csdn.net/pingwei_deng/article/details/80654696

https://blog.csdn.net/weixin_42371145/article/details/96880629

https://www.cnblogs.com/juneling/p/8946107.html

JavaScript——定时器（setTimeout/setInterval）相关推荐

JS中定时器setTimeout,setInterval,clearTimeout,clearInterval用法
setTimeout是指过多久执行,只执行一次 setInterval是指每过多久执行一次 clearTimeout是关闭setTimeout定时器 clearInterval是关闭setInterv ...
清除定时器和 vue 中遇到的定时器setTimeout setInterval问题
2019-03更新找到了更简单的方法,以setinterval为例,各位自行参考 mounted() {const that = thisconst timer = setInterval(func ...
定时器 setTimeout setInterval
1.代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
JavaScript教程-setTimeout,setInterval,
调度:setTimeout 和 setInterval 有时我们并不想立即执行一个函数,而是等待特定一段时间之后再执行.这就是所谓的"计划调用(scheduling a call)" ...
定时器 setTimeout(),setInterval() 清除定时器
定时器异步回调函数 callback setTimeout( 函数名,时间单位是毫秒) 延迟定时器,多久之后动,动完就结束了,定时炸弹 setInterval( 函数名,时间单位是毫秒) 连续定 ...
关于Javascript 中 setTimeout和setInterval的总结和思考
1. JavaScript 单线程我们通常说,javascript是单线程,指的是解释和执行js代码的引擎是单线程. 而对于浏览器来说,浏览器并不是单线程的,浏览器的线程通常包括:渲染引擎线程(负责 ...
JS定时器setTimeout和setInterval介绍
JS定时器setTimeout和setInterval介绍 JavaScript 定时器,有时也称为"计时器",用来在经过指定的时间后执行某些任务.avaScript 中提供了两种 ...
js 定时器（setTimeout/setInterval）出现变量未定义（xxx is not defined）的解决方法
js 定时器(setTimeout/setInterval)出现变量未定义(xxx is not defined) 的解决方法参考文章: (1)js 定时器(setTimeout/setInterv ...
js中的定时器 setTimeout()和setInterval() (保姆级教程)
1 两种定时器 window 对象给我们提供了 2 个非常好用的方法-定时器. setTimeout() setInterval() 2 setTimeout() 定时器 window.setTime ...
Vue中使用定时器（setInterval、setTimeout）
js中定时器有两种,一个是循环执行 setInterval,另一个是定时执行 setTimeout. 注意:定时器需要在页面销毁的时候清除掉,不然会一直存在! 1. 循环执行( setInterval ...

JavaScript——定时器（setTimeout/setInterval）