有趣的setTimeout--节流和防抖的实现

最新推荐文章于 2024-03-08 17:14:19 发布

木子聊前端

最新推荐文章于 2024-03-08 17:14:19 发布

阅读量1.1k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_35617751/article/details/115349859

版权

本文深入探讨了JavaScript中的setTimeout及其在节流和防抖中的应用。介绍了节流的概念，如每n秒内只执行一次，适合于前端高频率交互场景。接着解释了防抖的原理，即在n秒后执行，适合于防止频繁触发的事件，如搜索框输入、窗口大小调整等。文章提供了不同版本的节流和防抖实现，帮助开发者优化性能。

摘要由CSDN通过智能技术生成

1. setTimeout

setTimeout() 是一个默认是全局方法，用来设置一个定时器，该方法在定时器到期后执行一个函数或指定的一段代码

语法：

let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...)

参数说明：

func|code

想要执行的函数或代码字符串。一般传入的都是函数。由于某些历史原因，支持传入代码字符串，但是不建议这样做。

delay
执行前的延时，以毫秒为单位（1000 毫秒 = 1 秒），默认值是 0；

[arg1], [arg2], …
要传入被执行函数（或代码字符串）的参数列表（IE9 以下不支持）

例如：1秒后执行 hi 这个方法

function hi(){
   
  alert('hi!');
}
setTimeout(hi,1000);

关于参数

function hi(fn){
   
  console.log(fn());
}
let arg1=()=>{
    return 'arg1'};
setTimeout(hi,1000,arg1); // 1秒后 打印 arg1

使用方法很简单，那么如何在开发中，发挥最好的价值呢？带来什么便利性。
下面实验两种不同的使用方法或者叫场景

2.节流（throttle）

2.1 理解定义

节流是指：在 n 秒内只运行一次，若在 n 秒内重复触发，只有一次执行；

比如有一个方法 a() 在1秒内，无论怎么调用都只会执行一次；这个就是节流；

举个例子：地铁列车运行可以抽象的理解为节流，当列车（节流）进入站台（开始工作），停下来时间为1分钟，在1分钟以内无论上到列车上多少人（执行的函数）。列车都不会驶出站台，直到停留时间结束，列车才开出站台，已经上车的乘客全部出行完毕（函数执行完成）

2.2 场景

在前端开发中&#x

最低0.47元/天解锁文章