SpingBoot的项目实战--模拟电商【2.登录】

📣读完这篇文章里你能收获到

• setTimeout和setInterval的使用方法和区别
• 清除定时器的方法
• 高级定时器技巧和最佳实践

文章目录

• 一、定时器的使用方法和区别
• • 1. 延时任务
  • 2. 周期性任务
  • 3. setTimeout和setInterval的区别
• 二、清除定时器
• • 1. clearTimeout
  • 2. clearInterval
• 三、高级定时器技巧和最佳实践

一、定时器的使用方法和区别

JavaScript提供了两种类型的定时器：setTimeout和setInterval。它们允许我们在特定的时间间隔后执行代码。

1. 延时任务

setTimeout函数用于在指定的毫秒数后调用函数或计算表达式。

setTimeout(function() {
  console.log('Hello, world!');
}, 2000); // 在2秒后打印'Hello, world!'

2. 周期性任务

setInterval函数则会在每隔指定的毫秒数后重复调用函数或计算表达式。

setInterval(function() {
  console.log('Hello, world!');
}, 2000); // 每隔2秒打印'Hello, world!'

3. setTimeout和setInterval的区别

• setTimeout只执行一次回调函数，而setInterval会持续重复执行。
• 如果回调函数的执行时间超过了设定的间隔时间，setTimeout的下一次执行会被延迟，而setInterval则不会。

二、清除定时器

1. clearTimeout

clearTimeout函数用于取消由setTimeout创建的定时器。

var timeoutId = setTimeout(function() {
  console.log('This will not be printed');
}, 2000);

clearTimeout(timeoutId);

2. clearInterval

clearInterval函数用于取消由setInterval创建的定时器。

var intervalId = setInterval(function() {
  console.log('This will no longer be printed');
}, 2000);

clearInterval(intervalId);

三、高级定时器技巧和最佳实践

1. 使用匿名函数或箭头函数以避免变量作用域问题。
2. 注意处理可能的内存泄漏问题，尤其是在使用闭包的情况下。
3. 对于长时间运行的计时任务，考虑使用requestAnimationFrame代替setTimeout或setInterval。