一、JS延时定时器方法
在JavaScript中,我们用setTimeout()方法和setInterval()方法来实现延时和定时的效果。
// setTimeout()方法,延时一次性执行
setTimeout(function(){
console.log('延时1秒后执行');
}, 1000);
// setInterval()方法,定时执行,直到 clearInterval()结束
let i = 0;
let intervalId = setInterval(function(){
i++;
console.log('第' + i + '次执行');
}, 1000);
setTimeout(function(){
clearInterval(intervalId);
}, 5000);
二、JS延时器的使用方法
setTimeout()方法和setInterval()方法的使用都需要传递两个参数,第一个参数是一个函数,第二个参数是表示毫秒数的数字。
setTimeout()方法的函数只执行一次,执行后就结束了。
setInterval()方法的函数会每隔一段时间重复执行,除非你使用clearInterval()函数停止它。
三、定时器延时程序
在一些场合下,我们需要延时一段时间后再运行程序。这时候就可以使用setTimeout()方法来实现定时效果。
// 例子1:延迟3秒后弹出提示框
setTimeout(function(){
alert('三秒后弹出提示框');
}, 3000);
// 例子2:延迟5秒后更改背景颜色
setTimeout(function(){
document.body.style.backgroundColor = 'red';
}, 5000);
四、定时器延时器
setInterval()方法会每隔一段时间重复执行一次,除非用clearInterval()函数停止它。
// 例子1:每秒钟打印一次当前时间
setInterval(function(){
let now = new Date();
console.log(now);
}, 1000);
// 例子2:每隔2秒钟把一组数字写入文档
let i = 0;
setInterval(function(){
let element = document.createElement('div');
element.innerHTML = i++;
document.body.appendChild(element);
}, 2000);
五、JS延时定时器加递归函数
递归函数可以让延时定时器变得更有用。它可以让定时器每隔一段时间就不停地执行一段代码。
// 例子:每一秒钟弹出一个提示
function repeat(func, interval) {
var timerId = setInterval(function() {
func();
}, interval);
return timerId;
}
var hello = 0;
function sayHello() {
hello++;
if (hello > 5) {
clearInterval(timerId);
} else {
setTimeout(function() {
alert("Hello!");
sayHello();
}, 1000);
}
}
var timerId = repeat(sayHello, 2000);
六、JS延时定时器越来越快
在使用setInterval()方法时,它的执行时间是从
“开始时间 + 延迟时间 = 执行时间”
这样的公式计算的。但是实际应用中,我们可能需要设置动态的延迟时间,让程序的执行速度越来越快。
// 例子:每隔3秒钟执行一次,延时时间越来越短,直到延时时间为0
let delay = 3000;
let timerId = setTimeout(function tick() {
console.log('执行了一次');
delay -= 100;
if(delay < 0) delay = 0;
timerId = setTimeout(tick, delay);
}, delay);
七、断开延时定时器
在一些情况下,我们需要“断开”一个已经运行的setTimeout()或setInterval(),以防止程序继续执行。
// 例子:每3秒钟执行一次,执行5次后停止
let i = 0;
let intervalId = setInterval(function(){
i++;
console.log('第' + i + '次执行');
if(i >= 5) clearInterval(intervalId);
}, 3000);
八、关断延时定时器
断电或者关闭网页时,尚未执行的setTimeout()或setInterval()操作可能会引起不必要的麻烦。为了避免这些问题,我们需要关闭这些定时器。
// 例子:延时10秒后停止
let i = 0;
let timeoutId = setTimeout(function(){
console.log('延时执行了一次');
}, 10000);
window.addEventListener('beforeunload', function(){
clearTimeout(timeoutId);
});
九、PLC断电延时定时器
在PLC(Programmable Logic Controller,可编程逻辑控制器)中,断电延时定时器是一种常用的计时方式,它可以在PLC断电后延时若干秒再次启动。
但在JS中,JS程序与硬件不同,需要判断当前时间和启动时间的差值,来判断是否需要执行延时操作。
function plcDelay(ms){
let now = new Date().getTime();
while(new Date().getTime() < now + ms){
}
}
// 例子:延时1秒,然后输出“延时1秒后执行”
console.log('开始执行');
plcDelay(1000);
console.log('延时1秒后执行');