防抖节流函数实现以及使用场景

246 阅读2分钟

这是我参与8月更文挑战的第12天,活动详情查看: 8月更文挑战

首先说一下对于防抖节流的理解: 函数防抖

就是指一个事件被触发后n秒以后进行执行,在这个过程中如果这个我们再次触发了这个事件,那么我们重新开始计时。

比较常见的一个生活场景就是我们的电脑屏幕休眠,比如我们是五分钟休眠,但是我们等我们在第四分钟触动鼠标时,休眠计时器会重新开始及时

应用场景:表单监听事件进行网络请求,我们每输入一个字就进行一次网络请求,这样是不可取的,除非是一些主流的搜索引擎。一般的网站对于搜索框都是会做防抖处理的。

实现思路:我们在外部定义一个定时器,注意一定要在外部,因为我们全部只是用一个定时器,接着再我们的执行函数中判断当前的定时器是否有值,如果有值就使其停止计时(因为防抖的特性,一旦时间执行定时器停止),接着重新定义定时器,使其若干秒以后在实行我们的时间即可。

实现:(丐版)

   function debounce(fn, wait) {
         let timmer = null;
         return function () {
             if (timmer) {
                 clearTimeout(timmer)
             }
             timmer = setTimeout(() => {
                 fn()
             }, wait)
         }
     }

函数节流

在一个事件单位内我们规定只能触发一次事件。使用场景就是当一个事件被多次触动时我们并不想它的函数多次执行,这样我们处理的这个过程就叫做函数的节流。

使用场景:拖拽、缩放、滚动、动画等会引起超高频位置变动事件的地方

实现思路:我们可以使用一个标记来记录我们是否执行当前的函数,然后再当我们事件第一次调用时将我们的标记设为false,时其下一次不进入,并且设置一个定时器,定时器设置将我们的flag设为true,也就是说等定时器时间到了后就在其执行以下我们的函数。以此类推

实现:

     function throttle(fn, wait) {
         let flag = true;
         return function () {
             if (flag) {
                 fn()
                 flag = false
                 setTimeout(() => {
                     flag = true
                 }, wait);
             }
         }
     }

\