前言

当谈到 JavaScript 编程语言最基本的概念时，定时器就是一个必须掌握的知识点。在编写网站时，你经常会遇到需要在一定时间间隔内执行一些代码的情况。这时候，JavaScript 定时器就可以派上用场了。

什么是定时器？

JS 定时器是一种非常常见的 JavaScript 编程方法，用于周期性地执行指定的代码片段。JS 定时器可以用来实现许多非常实用的效果，例如周期性地更新页面内容、动态地加载数据、实现动画效果等等。

在 JavaScript 中，有两种主要的定时器方法： setTimeout() 和 setInterval() 。这两个方法都可以用来周期性地执行指定的代码片段，但它们之间有一些关键的区别。

setTimeout() 创建

setTimeout() 方法也可以周期性地执行指定的代码片段，但它只会执行一次，然后等待指定的时间后再次执行。简单来说就是指定时间后执行一段代码（延迟执行）。

setTimeout() 中共有 4 个参数，这里只使用两个参数，第一个参数是一个箭头函数，第二个参数表示在多少秒后执行这个箭头函数。

let timer = setTimeout(() => {console.log("我将在两秒后输出！");
}, 2 * 1000);

clearTimeout() 清除

clearTimeout() 方法用于取消一个定时任务，前提是这个定时任务还没被触发。

let timer = setTimeout(() => {console.log("我将在两秒后输出！");
}, 2 * 1000);
clearTimeout(timer); //定时任务取消，两秒后将不会有任何输出

setInterval() 创建

setInterval() 方法允许我们周期性地执行指定的代码片段，而这个代码片段会一直执行下去。简单来说就是每隔一段时间执行一段代码（间隔执行）。

setInterval() 方法的参数用法与 setTimeout() 一致，区别在于，这个定时器会一直循环执行。

let timer = setInterval(() => {console.log("每隔一秒我将输出一次")
}, 1000)

控制台打印

setInterval() 清除

clearInterval() 用于取消循环定时任务。

let timer = setInterval(() => {console.log("每隔一秒我将输出一次")
}, 1000)
setTimeout(() => {clearInterval(timer);// 将在3秒时被清除
}, 3000);

控制台打印

定时器与递归

递归函数是一种特殊的函数，它可以调用自身来完成某些任务。在 JavaScript 中，通过递归函数与定时器可以用来解决许多复杂的问题。

下面是一个最简单的栗子

<template><div>{{num}}</div>
</template><script>
export default {data() {return {num: 0,};},mounted() {this.recursion();},methods: {recursion() {this.num++;setTimeout(() => {this.recursion();}, 1000);},},
};
</script>

实现效果

深入理解

因为 JavaScript 的执行环境是单线程的，即默认情况下是同步加载的，也就是说 JavaScript 的加载是阻塞的。在同一时间内它只能完成一件事，自上而下执行，下面的代码等待上面的代码解析完成。在这种情况下，后面的代码其实就是被阻塞了。阻塞就意味着等待，等待就意味着用户体验，用户体验一来，那必须得使劲想办法，所以同步和异步出现了。

同步和异步

同步操作：队列执行。
异步操作：并线执行。

异步的任务不具有阻塞效应。同步任务都是在主线程中执行，形成了一个执行栈，直到主线程空闲时，才会去事件队列中查看是否有可执行的异步任务，如果有就推入主进程中。

异步任务在 JavaScript 中是通过回调函数实现异步的，一旦使用了 setTimeout() ，里面的回调函数就是异步代码，但是这里面的代码不会立马执行，而是要等待主队列为空，并达到定的延时时间才会执行。

运行机制

setTimeout() 和 setInterval() 的运行机制是，将指定的代码移出本次执行，等到下一轮事件循环时，再检查是否到了指定时间。如果到了，就执行对应的代码；如果不到，就等到再下一轮事件循环时重新判断。

这意味着，setTimeout() 和 setInterval() 指定的代码，必须等到本轮事件循环的所有同步任务都执行完，再等到本轮事件循环的“任务队列”的所有任务执行完，才会开始执行（宏任务）。由于前面的任务到底需要多少时间执行完，是不确定的，所以没有办法保证在时间内执行。

setTimeout(function () {console.log("异步任务执行");
}, 0);
function a(x) {console.log("a() 开始运行");b(x);console.log("a() 结束运行");
}
function b(y) {console.log("b() 开始运行");console.log(y);console.log("b() 结束运行");
}
console.log("同步任务开始");
a("hello world");
console.log("同步任务结束");

控制台打印结果

深入浅出JS定时器：从setTimeout到setInterval相关推荐

js 定时器（setTimeout/setInterval）出现变量未定义（xxx is not defined）的解决方法
js 定时器(setTimeout/setInterval)出现变量未定义(xxx is not defined) 的解决方法参考文章: (1)js 定时器(setTimeout/setInterv ...
JS的定时器的setTimeout和setInterval
setTimeout和setInterval都属于JS中的定时器,可以规定延迟时间再执行某个操作,不同的是setTimeout在规定时间后执行完某个操作就停止了,而setInterval则可以一直循环 ...
js基础之setTimeout与setInterval原理分析
setTimeout与setInterval概述 setTimeout与setInterval是JavaScript引擎提供的两个定时器方法,分别用于函数的延时执行和循环调用.前者的主要思想是通过一个 ...
【JS基础】setTimeout、setInterval、clearTimeout、clearInterval
定时器 JS设置定时器和清除定时器在做项目中难免会碰到需要实时刷新,动画依次出现等等需求,这时候就需要定时器登上我们的代码舞台了,所以今天我们就先来了解一下JS定时器的设置和清除吧. 一.启用定 ...
JS中的setTimeout和setInterval函数
目录前言 setTimeout setTimeout()函数应用之点名器 setInterval setInterval应用之重写点名器前言在生活中,常有定时做某事,或者循环做某事的需求,如设置 ...
java 定时器返回值_javascript 函数返回值（return）、定时器（setTimeout、setInterval）...
一.函数的返回值:return 1.函数名+括号=return后面的值 function fn1(){ return 100; } alert(fn1()); // 100 fn1()=return后 ...
定时器（setTimeout()和setInterval()）的清除问题
setTimeout()方法用来指定某个函数或字符串在指定的毫秒数之后执行.它返回一个整数,表示定时器的编号,这个值可以传递给clearTimeout()用于取消这个函数的执行, setInterva ...
js中计时器setTimeout、setInterval、requestAnimationFrame区别
转载自:https://www.cnblogs.com/xiaohuochai/p/5777186.html 本文仅用于作为学习笔记计时器一直是javascript动画的核心技术.而编写动画循环的关 ...
JS 自定义用setTimeout 实现 setInterval功能
自定义用setTimeout 实现 setInterval功能 // setTimeout(function() {// console.log('定时炸弹') // },1000)// setInt ...

深入浅出JS定时器：从setTimeout到setInterval

前言