1、计时器（2秒后输出）：setTimeout
// 1、计时器（2秒后输出）：setTimeout var time = null; timer = setTimeout(() => { console.log('Hello world!'); }, 2000);
2、取消计时器：clearTimeout
// 2、取消计时器：clearTimeout var btn = document.querySelector('button'); btn.onclick = function () { clearTimeout(timer); }
3、三秒后跳转到阿里（location.href）
// 3、三秒后跳转到阿里 setTimeout(() => { location.href = 'https://www.iconfont.cn/'; }, 3000);
4、防抖：防止事件抖动，重新输入，1秒后只执行一次
// 4、防抖：防止事件抖动，重新输入1秒后只执行一次(setTimeout) var timer = null; // 网页滑动：onscroll window.onscroll = function () { if (timer !== null) { clearTimeout(timer); } timer = setTimeout(() => { console.log('防抖'); timer = null; }, 1000); }
5、节流：输入时，每隔1秒执行一次
// 5、节流：每隔1秒执行一次(setInterval) var mark = true; window.onscroll = function () { if (mark) { setTimeout(() => { console.log('节流'); mark = true; }, 1000) } mark = false; }
6、源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { height: 2000px; } </style> </head> <body> <!-- 2、取消计时器 --> <button>停止按钮</button> <script> // 1、计时器（2秒后输出）：setTimeout var time = null; timer = setTimeout(() => { console.log('Hello world!'); }, 2000); // 2、取消计时器：clearTimeout var btn = document.querySelector('button'); btn.onclick = function () { clearTimeout(timer); } // 3、三秒后跳转到阿里 // setTimeout(() => { // location.href = 'https://www.iconfont.cn/'; // }, 3000); // 4、防抖：防止事件抖动，重新输入1秒后只执行一次(setTimeout) var timer = null; // 网页滑动：onscroll window.onscroll = function () { if (timer !== null) { clearTimeout(timer); } timer = setTimeout(() => { console.log('防抖'); timer = null; }, 1000); } </script> </body> </html>
