JavaScript中有效的定时器——settimeout和clearTimeout技巧

JavaScript定时器是一种可以在指定的时间间隔后重复执行代码或一次性执行代码的机制。setTimeout()和clearTimeout()是JavaScript中最基本的两个定时器方法，可以在我们编写Web应用程序时起到重要的作用。这篇文章将介绍一些关于如何使用settimeout和clearTimeout的技巧，帮助你写出更加高效的代码。

一、使用settimeout实现延迟执行

setTimeout()方法可以在指定的时间间隔后执行回调函数，这在执行一些延迟操作时非常有用。下面是使用setTimeout()方法实现延迟调用的代码示例：

// 延迟执行回调函数
setTimeout(function() {
  console.log('这条信息会在5000ms后打印到控制台上');
}, 5000);

上面的代码会在5秒后在控制台上输出一条消息。settimeout方法还可以传入多个参数，这些参数会被传递给回调函数：

setTimeout(function(param1, param2) {
  console.log(param1 + param2);
}, 5000, 'Hello', 'World');

上面的代码会在5秒后在控制台上输出"Hello World"。

二、清除settimeout定时器

当我们想要停止某个定时器时，可以使用clearTimeout()方法。下面是一些使用clearTimeout()方法清除定时器的示例：

示例1：

var timer = setTimeout(function() {
  console.log('5秒后这条信息会被打印到控制台')
}, 5000);

clearTimeout(timer); // 可以使用变量名来清除定时器

示例2：

var timer = setTimeout(function() {
  console.log('这条信息不会被打印到控制台');
}, 5000);

clearTimeout(timer);
clearTimeout(timer); // 多次调用clearTimeout()方法不会产生副作用

三、使用settimeout和clearTimeout实现计时器

使用settimeout和clearTimeout可以实现常见的计时器功能。下面的示例是一个简单的计时器，它可以在网页上实时显示已经过去的时间：

// 获取页面上的元素
var timeDisplay = document.querySelector('#time');
var startButton = document.querySelector('#startButton');
var stopButton = document.querySelector('#stopButton');
var resetButton = document.querySelector('#resetButton');

// 用于存储定时器ID
var timer;

// 记录计时器开始的时间
var startTime;

// 每一帧调用的回调函数
function run() { 
  // 计算已经过去的时间
  var elapsedTime = Date.now() - startTime;

  // 将时间转换为字符串
  var minutes = ('0' + Math.floor(elapsedTime / 60000)).slice(-2);
  var seconds = ('0' + Math.floor((elapsedTime % 60000) / 1000)).slice(-2);
  var milliseconds = ('00' + (elapsedTime % 1000)).slice(-3);

  // 将时间显示在页面上
  timeDisplay.innerHTML = minutes + ':' + seconds + '.' + milliseconds;

  // 下一帧回调
  timer = setTimeout(run, 10);
}

// 开始计时
startButton.addEventListener('click', function() {
  // 开始计时的时间
  startTime = Date.now();

  // 开始调用run函数
  run();

  // 禁用开始按钮
  startButton.disabled = true;
});

// 停止计时
stopButton.addEventListener('click', function() {
  // 停止计时器
  clearTimeout(timer);

  // 启用开始按钮
  startButton.disabled = false;
});

// 重置计时
resetButton.addEventListener('click', function() {
  // 停止计时器
  clearTimeout(timer);

  // 将时间显示为 00:00.000
  timeDisplay.innerHTML = '00:00.000';

  // 启用开始按钮
  startButton.disabled = false;
});

四、如何优化settimeout()

setTimeout()方法虽然非常常用，但是也容易产生一些问题，例如定时器代码的执行时间过长，回调函数被阻塞，进而影响页面的性能。可以通过减少定时器的使用次数来提高性能，下面是一些减少settimeout()方法使用次数的技巧：

1、节流和防抖动

当一些操作需要在持续时间内执行很多次时，可以使用节流和防抖动技术。节流技术可以控制一些事件的执行速率，例如控制按钮点击事件的执行速率，从而减少settimeout()方法的使用。

防抖动技术可以避免一些不必要的执行，例如当用户在输入框中输入文字时，可以等待他们输入完全部文字后再对内容进行校验，而不是每一次输入都进行校验，从而减少settimeout()方法的使用。

2、使用requestAnimationFrame

requestAnimationFrame()方法是浏览器提供的一种优化性能的方法，它可以让浏览器在进行动画或其他操作时更加流畅。相比于settimeout()方法，使用requestAnimationFrame()方法可以减少一些性能问题。

五、结语

本文介绍了通过使用settimeout和clearTimeout方法实现各种定时器功能的技巧。在编写JavaScript程序时，了解这些方法及其使用场景可以让你的代码更高效，更加优秀。