秒懂JS定时器、延时器

引言

在JavaScript中，定时器和延时器是常用的功能，它们允许我们在特定的时间间隔执行代码，或者延迟一段时间后执行代码。

定时器

1.setTimeout函数：

setTimeout(function() {}, 1000)

setTimeout函数用于在一定时间后执行一段代码。它接受两个参数，第一个参数是要执行的代码，可以是函数或字符串形式的代码，第二个参数是延迟的时间，单位是毫秒。

setTimeout(()=> {
  console.log("Hello, world!");
}, 1000);

上面代码将会在一秒后打印出hello，world。打印之后将不在进行相关操作。

延时器

2.setInterval函数：

setInterval(function() {}, 1000);

setInterval函数用于按照指定的时间间隔重复执行一段代码。它也接受两个参数，第一个参数是要执行的代码，第二个参数是时间间隔，单位是毫秒。

setInterval(function(){
	console.log(111)
},1000)
//执行的结果就是每过一秒之后就会在后台打印出222的数据

区别

在JavaScript中，setTimeout()是延时器，setInterval()是定时器。setTimeout(fn(),delay)在执行时,是在载入后延迟指定时间后,去执行一次表达式,注意只执行一次，而setInterval(fn(),delay)在载入后,每隔指定的时间就执行一次表达式 所以是不一样的。

清除延时函数

1.clearTimeout （）、clearinterval（）函数

clearInterval() 函数可以清除一个延时器。 要清除定时器，就必须在用定时器的时候，定义一个变量来记录定时器的返回值。

//setTimeout 1000ms后执行1次
let test1 = setTimeout(function(){
    //your codes
},1000);
 
//setInterval 每隔1000ms执行一次
let test2 = setInterval(function(){
   //your codes
},1000)
 
//清除Timeout的定时器,传入变量名(创建Timeout定时器时定义的变量名)
clearTimeout(test1);
 
//清除Interval的定时器,传入变量名(创建Interval定时器时定义的变量名)
clearInterval(test2);

let timer = 0
let  timeoutId =setInterval(()=> {
  timer ++
  console.log(" code ");
  if(timer == 5){
  clearTimeout(timeoutId);
  }
}, 1000);
//表示 定义一个变量 ，启动延时器，每隔一秒打印出code ，当变量timer等于5时，关闭延时器，将不再打印。