js 怎么延迟执行函数

JavaScript中延迟执行函数主要通过setTimeout、setInterval和requestAnimationFrame实现，具体方法如下：

• setTimeout：单次延迟执行最常用的方法，允许设置延迟时间（毫秒）后执行指定函数。

  基本语法：setTimeout(function, delay, [arg1, arg2, ...]);

  function：要执行的函数。

  delay：延迟时间（毫秒），如2000表示2秒后执行。

  可选参数：可传递额外参数给目标函数。

  示例：function greet(name) { console.log("你好, " + name + "!");}setTimeout(greet, 1500, "张三"); // 1.5秒后输出"你好, 张三!"

• setInterval：重复延迟执行按固定时间间隔重复执行函数，需配合clearInterval停止。

  基本语法：let intervalId = setInterval(function, interval, [arg1, arg2, ...]);

  interval：每次执行的间隔时间（毫秒）。

  停止执行：clearInterval(intervalId); // 传入setInterval返回的ID

  示例：let counter = 0;let intervalId = setInterval(function() { console.log("计数器: " + counter); counter++; if (counter > 5) clearInterval(intervalId); // 执行5次后停止}, 1000); // 每隔1秒执行一次

• requestAnimationFrame：动画场景延迟执行在浏览器下一次重绘前执行函数，适合动画优化，性能优于setTimeout。

  基本语法：requestAnimationFrame(function);

  函数会在浏览器刷新频率（通常60Hz）下同步执行。

  示例：function delayedFunction() { console.log("requestAnimationFrame 执行了！");}requestAnimationFrame(function() { setTimeout(delayedFunction, 1000); // 结合setTimeout实现1秒后执行});

取消延迟执行的方法

• clearTimeout：取消setTimeout的延迟执行。let timeoutId = setTimeout(function() { console.log("这个函数不会被执行！");}, 3000);clearTimeout(timeoutId); // 取消执行
• clearInterval：停止setInterval的重复执行。let intervalId = setInterval(function() { console.log("这个函数也不会重复执行！");}, 1000);clearInterval(intervalId); // 停止执行

延迟执行的实际用途

• 优化页面加载：将非关键任务（如统计代码）延迟到页面渲染完成后执行。
• 创建动画效果：通过setTimeout或requestAnimationFrame实现平滑动画。
• 处理用户输入：例如输入框防抖（延迟执行搜索请求，减少无效请求）。
• 避免阻塞主线程：将耗时操作（如日志记录）放入事件队列，防止UI卡顿。

setTimeout的0延迟特性

• 机制：setTimeout(func, 0)不会立即执行，而是将func放入事件队列，等待当前执行栈清空后执行。
• 示例：console.log("开始");setTimeout(function() { console.log("setTimeout 0");}, 0);console.log("结束");// 输出顺序：开始 → 结束 → setTimeout 0
• 意义：体现JavaScript事件循环机制，避免长时间脚本阻塞UI更新，提升性能。

总结

• 单次延迟：优先使用setTimeout。
• 重复执行：使用setInterval并记得停止。
• 动画优化：选择requestAnimationFrame。
• 取消操作：通过clearTimeout或clearInterval管理延迟任务。
• 0延迟：理解事件队列机制，合理利用非阻塞特性。