性能优化之防抖和节流

落落落洛克 等级 933 2 2
标签: Javascript

我的前端学习笔记📒

最近花了点时间把笔记整理到语雀上了,方便童鞋们阅读

性能优化之防抖和节流

性能优化之防抖和节流

最近公司做一个内部的搜索系统,因为搜索框需要搜索功能需要频繁的去发送请求,这很明显的会给服务器带来压力,那么这时候就要用到防抖和节流的知识点了

防抖函数debounce

性能优化之防抖和节流

比如我们的百度搜索,搜索的时候有关键字的提醒,关键字的来源来自于客户端向服务端请求得到的数据,我们通过keyup事件去监听触发请求,如果返回值的搜索key已经不是搜索框现在的值,就丢弃掉这次返回,于是我们提出这样一个优化需求触发事件,但是我一定在事件触发n秒后才执行,如果你在一个事件触发的n秒内又触发了这个事件,那我就以新的事件的时间为准,n 秒后才执行

那么我们来动手实现我们的第一版的防抖函数吧:

function debounce(fn,wait){
     let timeout
     return function(){
         if(timeout){
             clearTimeout(timeout)
         }
        timeout=setTimeout(fn,wait)
     }
}

第一版代码已经实现了,我们来写个demo验证下吧:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      #search {
        width400px;
        margin-left300px;
        margin-bottom50px;
      }
      #showSearch {
        width800px;
        height100px;
        background: lightblue;
        color: red;
        margin-left300px;
      }
    
</style>
  </head>
  <body>
    <input type="search" name="" id="search" />
    <div id="showSearch"></div>
  </body>
  <script>
    function debounce(fn, wait{
      let timeout;
      return function({
        if (timeout) {
          clearTimeout(timeout);
        }
        timeout = setTimeout(fn, wait);
      };
    }
    let search = document.querySelector("#search");
    let showSearch = document.querySelector("#showSearch");
    function getSearchInfo(e{
       // showSearch.innerText = this.value; // 报错
      //  console.log(e); // undefined
      showSearch.innerText = search.value;
    }
    search.onkeyup = debounce(getSearchInfo, 1000);
  
</script>
</html>

效果图:

性能优化之防抖和节流
可以看到执行上面的demo,我们输入值以后不触发keyup事件就会隔1秒钟蓝色div才会出现字,如果你一直触发是不会显示的等到你停止触发后的一秒后才显示

有同学可能对第一版代码觉得挺简单的,确实简单,不过我还是要啰嗦几句,第一版的代码中,debounce函数返回了一个匿名函数,而这匿名函数又引用了timeout这个变量,这样就形成了闭包,也就是函数的执行上下文活动对象并不会被销毁,保存了timeout变量,才能实现我们这个如果你在一个事件触发的n秒内又触发了这个事件,那我就以新的事件的时间为准,n 秒后才执行的需求

修复this指向和event问题

显然上述中的代码还存留了二个问题就是this问题,我们this指向的不是window对象,而是指向我们的dom对象,第二个就是event对象,event对象在这里会报undefined,那么接下来我们来完善我们的第二版代码吧:

第二版本的防抖函数

 function debounce(fn, wait{
      let timeout;
      return function({
        let context = this;
        let args = arguments;
        if (timeout) {
          clearTimeout(timeout);
        }
        timeout = setTimeout(function({
          fn.apply(context, args);
        }, wait);
      };
    }

第二版代码已经实现了,我们来写个demo验证下吧:

let search = document.querySelector("#search");
    let showSearch = document.querySelector("#showSearch");
    function getSearchInfo(e{
      showSearch.innerText = this.value; 
      console.log(e); 
    }
    search.onkeyup = debounce(getSearchInfo, 1000);

效果图:

性能优化之防抖和节流

这里涉及的知识点就是this指向arguments、apply等,先来说说arguments属性,我们知道可以通过arguments属性获取函数的参数值,而dom事件操作中,会给回调函数(这里回调函数是debounce函数返回的闭包函数)传递一个event参数,这样我们就可以通过arguments属性拿到event属性,那么问题二就解决啦,再来说说问题一的this指向,此时这里keyup事件的回调函数是debounce函数返回的闭包函数而不是getSearchInfo函数(但是我们希望处理业务逻辑的getSearchInfo的this指向能够指向dom对象),我们知道this的指向是我最后被谁调用,我就指向谁,那么我这里被search调用所以this指向search,但是由于有setTimeout异步操作,我们getSearchInfo函数的this指向是window(非严格模式下),所以我们需要改变getSearchInfo的指向,这样我们用apply就完美实现了

立即执行

这时候我们开发的问题解决了,但是万恶的产品又提出了一个新的需求方案:我不希望非要等到事件停止触发后才执行,我希望立刻执行函数,然后等到停止触发 n 秒后,才可以重新触发执行,那我们就来实现这个新需求吧

// 参数immediate值 true||false
    function debounce(fn, wait, immediate{
      let timeout;
      return function({
        let context = this;
        let args = arguments;
        if (timeout) {
          clearTimeout(timeout);
        }
        let callNow = !timeout;
        if (immediate) {
          // 已经执行过,不再执行
          timeout = setTimeout(function({
            timeout = null;
          }, wait);
          if (callNow) fn.apply(context, args);
        } else {
          timeout = setTimeout(function({
            fn.apply(context, args);
          }, wait);
        }
      };
    }

demo使用:

    search.onkeyup = debounce(getSearchInfo, 100true);

效果图如下:

性能优化之防抖和节流

取消功能

虽然我们的防抖函数已经很完善了,但是我们希望它能支持取消的功能,那接着来完善我们的代码吧

第三版本的防抖函数

    // 参数immediate值 true||false
    function debounce(fn, wait, immediate{
      let timeout;
      let debounced = function({
        let context = this;
        let args = arguments;
        if (timeout) {
          clearTimeout(timeout);
        }
        let callNow = !timeout;
        if (immediate) {
          // 已经执行过,不再执行
          timeout = setTimeout(function({
            timeout = null;
          }, wait);
          if (callNow) fn.apply(context, args);
        } else {
          timeout = setTimeout(function({
            fn.apply(context, args);
          }, wait);
        }
      };
      debounced.cancel = function({
        clearTimeout(timeout);
        timeout = null;
      };
      return debounced
    }

修复result bug

到此,我们的防抖函数基本实现了,但是细心的同学可能会发现,如果fn函数参数存在return值,我们需要去接收它,那么来修复这个小Bug吧

第四版本的防抖函数

// 参数immediate值 true||false
    function debounce(fn, wait, immediate{
      let timeout, result;
      let debounced = function({
        let context = this;
        let args = arguments;
        if (timeout) {
          clearTimeout(timeout);
        }
        let callNow = !timeout;
        if (immediate) {
          // 已经执行过,不再执行
          timeout = setTimeout(function({
            timeout = null;
          }, wait);
          if (callNow) {
            result = fn.apply(context, args);
          }
        } else {
          timeout = setTimeout(function({
            result = fn.apply(context, args);
            console.log(result);
          }, wait);
        }
      };
      debounced.cancel = function({
        clearTimeout(timeout);
        timeout = null;
      };
      return debounced;
    }

到这里我们的防抖函数已经实现了,大家可以动手实现下

防抖函数的总结

上面罗里吧嗦的说了一堆,实际上可以精简成两个需求

  • 非立即执行:,如果你在一个事件触发的n秒内又触发了这个事件,那我就以新的事件的时间为准,n 秒后才执行
  • 立即执行:我不希望非要等到事件停止触发后才执行,我希望立刻执行函数,然后等到停止触发 n 秒后,才可以重新触发执行

我们可以按照立即执行和非立即执行这两个需求去理解我们的防抖函数

节流 throttle

持续触发事件,每隔一段时间,只执行一次事件。

节流相对来说还是很好理解了,当然了他也有跟防抖函数一样有立即执行和非立即执行两个需求,那我们实现throttle函数的代码吧

立即执行

我们可以使用时间戳,当触发事件的时候,我们取出当前的时间戳,然后减去之前的时间戳(最一开始值设为 0),如果大于设置的时间周期,就执行函数,然后更新时间戳为当前的时间戳,如果小于,就不执行

function throttle(fn, wait{
      let context, args;
      let previous = 0;
      return function({
        let now = +new Date();
        context = this;
        args = arguments;
        if (now - previous > wait) {
          fn.apply(context, args);
          previous = now;
        }
      };
    }

demo使用:

demo跟上述防抖用是一样

    search.onkeyup = throttle(getSearchInfo, 3000);

这里的节流立即执行版跟我们的防抖第一版的知识点原理一样,不再过多的赘述

非立即执行

非立即执行就是过了n秒后我们再执行,那么我们自然而然想到定时器

function throttle(fn, wait{
      let timeout;
      return function({
        let context = this;
        let args = arguments;
        // 这里不需要清除定时器 清除了会重新计算时间
        // 清除这个定时器不代表timeout为空
        if (timeout) {
          return false;
        }
        timeout = setTimeout(function({
          fn.apply(context, args);
          timeout = null;
        }, wait);
      };
    }

demo使用

    function getSearchInfo(e{
      console.log(this.value);
      // 验证的效果是 showSearch多久才能读到这个this.value
      showSearch.innerText = this.value;

    }
    search.onkeyup = throttle(getSearchInfo, 3000);

这次的效果是等待过了三秒才执行,那我们来比较立即执行和非立即执行的效果

  • 立即执行会立刻执行,非立即执行会在 n 秒后第一次执行
  • 立即执行停止触发后没有办法再执行事件,非立即执行停止触发后依然会再执行一次事件

一统立即执行和非立即执行

我们的需求想要这样:我触发这个事件想要立即执行,事件停止触发后再执行一遍,也就是n秒内,假设我触发事件大于等于两次先会立即执行,最后会再触发一次

 function throttle(fn, wait{
      let timeout, remaining, context, args;
      let previous = 0;
      // timeout等于null,代表定时器已经完成
      // 最后触发的函数
      let later = function({
        previous = +new Date();
        timeout = null;
        fn.apply(context, args);
        console.log("最后执行的");
      };
      let throttled = function({
        context = this;
        args = arguments;
        let now = +new Date();
        // 下次触发fn剩余的时间
        remaining = wait - (now - previous);
        // 代表我这个定时器执行完了 那么就执行n秒后(比如:3~6秒)的事件操作
        // 如果没有剩余的时间
        if (remaining <= 0) {
          if (timeout) {
            clearTimeout(timeout);
            timeout = null;
          }
          previous = now;
          // 立即执行
          fn.apply(context, args);
        } else if (!timeout) {
          timeout = setTimeout(later, remaining);
        }
      };
      return throttled;
    }

效果图:

性能优化之防抖和节流

包含立即执行和非立即执行

有时候我们想要一种情况就行,想要立即执行不需要再去执行一次,或者想要最后执行一次,不需要立即执行,那我们对上述做个兼容

实现方式是定义一个options对象,禁止立即执行或者非立即执行

  • immediate:false 表示禁用第一次执行
  • last: false 表示禁用停止触发的回调
    function throttle(fn, wait, options{
      let timeout, remaining, context, args;
      let previous = 0;
      // timeout等于null,代表定时器已经完成
      // 如果没有传options默认为空
      if (!options) {
        options = {}; // 虽然没有声明options, 相当于window.options={}
      }
      let later = function({
        // previous = +new Date();
        previous = options.immediate == false ? 0 : new Date().getTime(); // +new Date() 等同于:new Date().getTime()
        timeout = null;
        fn.call(context, args);
        console.log("最后执行的");
      };
      let throttled = function({
        context = this;
        args = arguments;
        let now = +new Date();
        if (!previous && options.immediate === false) {
          previous = now;
        }
        // 下次触发 func 剩余的时间
        remaining = wait - (now - previous);
        // 代表我这个定时器执行完了 那么就执行n秒后(比如:3~6秒)的事件操作
        // 如果没有剩余的时间了
        if (remaining <= 0) {
          if (timeout) {
            clearTimeout(timeout);
            timeout = null;
          }
          previous = now;
          // 立即执行
          fn.apply(context, args);
        } else if (!timeout && options.last !== false) {
          timeout = setTimeout(later, remaining);
        }
      };
      return throttled;
    }

demo使用:

search.onkeyup = throttle(getSearchInfo, 3000, { immediatetruelastfalse });

优化throttle函数

上述例子中我们使用了闭包,而闭包所引用的变量挺多的,但是一直没有被gc回收,我们来手动回收下这些变量

function throttle(fn, wait, options{
      let timeout, remaining, context, args;
      let previous = 0;
      // timeout等于null,代表定时器已经完成
      // 如果没有传options默认为空
      if (!options) {
        options = {}; // 虽然没有声明options, 相当于window.options={}
      }
      let later = function({
        // previous = +new Date();
        previous = options.immediate == false ? 0 : new Date().getTime(); // +new Date() 等同于:new Date().getTime()
        timeout = null;
        fn.call(context, args);
        if (!timeout) context = args = null;
        console.log("最后执行的");
      };
      let throttled = function({
        context = this;
        args = arguments;
        let now = +new Date();
        if (!previous && options.immediate === false) {
          previous = now;
        }
        // 下次触发 func 剩余的时间
        remaining = wait - (now - previous);
        // 代表我这个定时器执行完了 那么就执行n秒后(比如:3~6秒)的事件操作
        // 如果没有剩余的时间了
        if (remaining <= 0) {
          if (timeout) {
            clearTimeout(timeout);
            timeout = null;
          }
          previous = now;
          // 立即执行
          fn.apply(context, args);
          if (!timeout) context = args = null;
        } else if (!timeout && options.last !== false) {
          timeout = setTimeout(later, remaining);
        }
      };
      return throttled;
    }

取消功能

我们再拓展个取消功能,取消功能实际就是取消定时器,让它在这一次事件触发中立即执行

function throttle(fn, wait, options{
      let timeout, remaining, context, args;
      let previous = 0;
      // timeout等于null,代表定时器已经完成
      // 如果没有传options默认为空
      if (!options) {
        options = {}; // 虽然没有声明options, 相当于window.options={}
      }
      let later = function({
        // previous = +new Date();
        previous = options.immediate == false ? 0 : new Date().getTime(); // +new Date() 等同于:new Date().getTime()
        timeout = null;
        fn.call(context, args);
        if (!timeout) context = args = null;
        console.log("最后执行的");
      };
      let throttled = function({
        context = this;
        args = arguments;
        let now = +new Date();
        if (!previous && options.immediate === false) {
          previous = now;
        }
        // 下次触发 func 剩余的时间
        remaining = wait - (now - previous);
        // 代表我这个定时器执行完了 那么就执行n秒后(比如:3~6秒)的事件操作
        // 如果没有剩余的时间了
        if (remaining <= 0) {
          if (timeout) {
            clearTimeout(timeout);
            timeout = null;
          }
          previous = now;
          // 立即执行
          fn.apply(context, args);
          if (!timeout) context = args = null;
        } else if (!timeout && options.last !== false) {
          timeout = setTimeout(later, remaining);
        }
      };
      throttled.cancel = function({
        clearTimeout(timeout);
        timeout = null;
        previous = 0;
      };
      return throttled;
    }

到这里我们的节流函数就基本实现完了,接下来那聊聊防抖函数和节流函数的区别吧

防抖和节流的区别

实际上防抖和节流都是限制一些频繁的事件触发window 的 resize、scroll、mousedown、mousemove、keyup、keydown),但他们还是有实质性的区别的

  • 防抖是虽然事件持续触发,但只有等事件停止触发后n秒才执行函数(如果你在时间内重新触发事件,那么时间就重新算,这是防抖的特点,可以按照这个特点选择场景)。比如生活中的坐公交,就是一定时间内,如果有人陆续刷卡上车,司机就不会开车。只有别人没刷,司机才开车。
  • 节流是持续触发的时候,每隔n秒执行一次函数比如人的眨眼睛,就是一定时间内眨一次。这是函数节流最形象的解释

总结

防抖函数和节流函数涉及到的知识点很多,他们以接收一个函数为参数,实际就是一个高阶函数,也用到了闭包,this指向,apply等知识点,当然函数的实现是参考大佬的博客,我这里就是做下记录以及总结

我的前端学习笔记📒

最近花了点时间把笔记整理到语雀上了,方便童鞋们阅读

性能优化之防抖和节流

性能优化之防抖和节流

收藏
评论区

相关推荐

js的防抖与节流
在进行窗口的resize、scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。 此时我们可以采用debounce(防抖)和throttle(节流)的方式来减少调用频率,同时又不影响实际效果。 函数防抖 函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才
性能优化之防抖和节流
我的前端学习笔记📒 最近花了点时间把笔记整理到语雀上了,方便童鞋们阅读 我的前端学习笔记📒(https://www.yuque.com/wanggangfeng
防抖和节流
防抖 触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次触发,则重新计算事件 思路 每次触发的时候取消之前的延时调用方法,以当下为准 //防抖 function debounce(fn){ let timeout null; return function(){ clearTimeout
浅聊函数防抖与节流
防抖(debounce) 所谓防抖,就是指触发事件后 n 秒后才执行函数,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。 防抖类型分为 1. 非立即执行版 2. 立即执行版 3. 合成版本 防抖 防抖应用场景 登录、发短信等按钮避免用户点击太快,以致于发送了多次请求 调整浏览器窗口大小时,resize 次数过于频繁,造成计算过多,此时需要一次到
记录 30 seconds of code 项目个人觉得中有价值的片段或者小技巧(二)
D F 系列 1、防抖函数,限制高频触发jsconst debounce (fn, ms 0) let timeoutId; return function(...args) clearTimeout(timeoutId); timeoutId setTimeout(() fn.apply(this, args), ms);
DDoS防护之TCP防护
欢迎访问[网易云社区](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fsq.163yun.com%2Fblog%3Ftag%3DM_tg_767_64),了解更多网易技术产品运营经验。 TCP协议,相信对于每一个开发工程师都不陌生。由于该协议是一个面向连接,可靠的特性,广泛应用于
2020下半年美妆行业
一、抖音短视频美妆电商分析 ### 美容护肤、精致彩妆品类在抖音短视频中较为热销 2020下半年抖音短视频热销Top 1000商品中,美容护肤、精致彩妆类商品的数量占比跻身前四,仅次于食品饮料、日用百货 ![](https://oscimg.oschina.net/oscnet/b7e6208f-17ca-4fab-a768-dd140566f9f
2020年前端开发面试必考:什么是前端防抖?
防抖(去抖),以及节流(分流)在日常开发中可能用的不多,但在特定场景,却十分有用。 ![](https://oscimg.oschina.net/oscnet/dc9ed2e6-56be-427d-8f33-24e57538aa13.png) 最近有同学遇到了要做防抖的需求,那今天李老师就来讲解一下,什么是防抖。为了方便查阅和让不了解防抖
2020年前端开发面试必考:什么是前端防抖?
防抖(去抖),以及节流(分流)在日常开发中可能用的不多,但在特定场景,却十分有用。 ![](https://oscimg.oschina.net/oscnet/dc9ed2e6-56be-427d-8f33-24e57538aa13.png) 最近有同学遇到了要做防抖的需求,那今天李老师就来讲解一下,什么是防抖。为了方便查阅和让不了解防抖
35道面向初中级前端的基础面试题
**如需获取完整版229页PDF面试题,请直接滑到文末。** ### 1\. 什么是同源策略? 同源策略可防止 JavaScript 发起跨域请求。源被定义为协议、主机名和端口号的组合。此策略可防止页面上的恶意脚本通过该页面的文档对象模型,访问另一个网页上的敏感数据。 参考资料: * [浏览器的同源策略](https://www.oschina.
Javascript中最常用的55个经典技巧 (网摘)
Javascript中最常用的55个经典技巧1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键no 可用于Table2. 取消选取、防止复制3. onpaste="return false" 不准粘贴4. oncopy="return false;" oncut="return false;
Typescript 和 Javascript之间的区别
JavaScript 和 TypeScript 的概要介绍 ============================= **JavaScript** -------------- JavaScript 是一种轻量级的解释性脚本语言,可嵌入到 HTML 页面中,在浏览器端执行,能够实现浏览器端丰富的交互功能,为用户带来流畅多样的用户体验。 JavaScr
该怎么进行抖音广告投放呢?
短片广告是目前最热门的广告形式之一,而抖音信息流广告则是广告主们热衷的投广告平台。广告主可以利用抖音应用投放广告,展示产品,引导消费者点击产品购买,这样就可以赚取一定的利润。下面我们就来介绍下在应该怎么做。抖音是怎么开设广告的呢?要准备什么在抖音上投放广告和在大多数广告平台上投放广告是一样的。有必要开一个推广帐户,预先充值然后投放广告。一、开设抖音短视频广告