在我们日常编写JS代码时,经常会遇到需要延时关闭或需要在一定时间后再执行某个动作的情况。这时候我们就会用到JS的延时执行函数,比如setTimeout和setInterval。
setTimeout函数是JS中最常用的延时执行函数之一,用法如下:
setTimeout(function(){ //要执行的代码 }, 1000);//延时时间,单位是毫秒
上述代码中,我们将一个匿名函数作为第一个参数传递给了setTimeout函数,这个函数会在1000毫秒后执行。假设我们需要在用户点击一个按钮之后延时2秒再跳转至另一个页面,代码如下:
document.getElementById("button").onclick = function(){ setTimeout(function(){ window.location.href = "https://www.example.com"; }, 2000); }
这样,当用户点击按钮后,会等待2秒后再跳转至指定页面。
除了setTimeout,还有一个常用的延时执行函数是setInterval,它会在指定的时间间隔内重复执行指定的代码。看一下下面的例子:
var count = 0; var timer = setInterval(function(){ count++; console.log(count); //输出计数器的值 }, 1000);
上述代码中,我们定义了一个count变量和一个timer变量,然后使用setInterval函数每隔1000毫秒就让count加1,并将count的值输出在控制台上。
如果我们想要在达到某个条件后停止setInterval函数的执行,可以使用clearInterval函数。比如,我们有一个计时器,需要在用户点击按钮后开始计时,当计时器的值达到10秒时,需要停止计时器的执行,代码如下:
var count = 0; var timer; document.getElementById("button").onclick = function(){ timer = setInterval(function(){ count++; console.log(count); //输出计数器的值 if(count == 10){ clearInterval(timer); //计时器执行10秒后停止 } }, 1000); }
上述代码中,我们在用户点击按钮时开始执行计时器,每隔1000毫秒让count加1,当count达到10时停止计时器的执行。
总之,JS的延时执行函数能够让我们更好地掌控程序的执行时机,不至于出现过早执行或过晚执行的问题。要注意合理使用这些函数,避免出现死循环或重复执行的问题。