JS延时定时器——让JavaScript程序按你的规则执行

小蓝 • 2024-12-12 13:01 • 编程

一、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秒后执行');

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/244335.html