性能优化之防抖和节流

落落落洛克 等级 666 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
JavaScript 代码整洁之道
作者:alivebao(https://github.com/alivebao/cleancodejs)
防抖和节流
防抖 触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次触发,则重新计算事件 思路 每次触发的时候取消之前的延时调用方法,以当下为准 //防抖 function debounce(fn){ let timeout null; return function(){ clearTimeout
零信任安全:针对网络威胁的多层保护
深度防御:安全层部署零信任此信息图显示了零信任模型如何在每个安全层上结合使用“信任门”和“深度防御”来保护您最宝贵的资产(数据)的机密性,完整性和可用性。 零信任安全性是下一代安全模型,可防止日益严重的网络威胁。在当今这个高速时代,全天候24 x 7运作,在全球COVID19大流行中,全球移动性同样突然而突然停止,IT安全模型必须
火绒安全软件(安全防护软件)官方中文版V5.0.59.0 | 火绒安全软件好用吗
火绒安全软件是目前国内极少数专注安全防护软件领域集‘杀、防、管、控’于一体的良心软件,具有资源占用小、高查杀、低误杀、多重防护、弹窗广告拦截器、系统加固、轻巧纯净以及不弹窗、不捆绑、不劫持浏览器等优点,将各类威胁拦截在系统之外并帮助广大火绒安全软件用户全面拦截阻止流氓软件,该互联网安全软件拥有领先的安全核心技术、EDR运营体系和成熟的产品,能够有效帮
js-Answers一
JavaScript的组成 JavaScript 由以下三部分组成: 1. ECMAScript(核心):JavaScript 语言基础 2. DOM(文档对象模型):规定了访问HTML和XML的接口 3. BOM(浏览器对象模型):提供了浏览器窗口之间进行交互的对象和方法 JS的基本数据类型和引用数据类型
liunx服务器防火墙开启导致无法远程连接解决方案
前言在使用阿里云服务器的过程中,开启了服务器的防火墙,导致本地xshell以及阿里云官网自带的远程连接【端口:22】均无法使用,所有服务器开启的端口无法使用,在联系阿里云技术客服后,才得到了解决,将整个解决方案总结如下,希望可以帮到那些遇到此类问题的同学。 解决思路1.设置救援连接密码2.进行救援连接(和电脑系统的安全模式启动类似)3.关闭防火墙4.成功解决
浅聊函数防抖与节流
防抖(debounce) 所谓防抖,就是指触发事件后 n 秒后才执行函数,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。 防抖类型分为 1. 非立即执行版 2. 立即执行版 3. 合成版本 防抖 防抖应用场景 登录、发短信等按钮避免用户点击太快,以致于发送了多次请求 调整浏览器窗口大小时,resize 次数过于频繁,造成计算过多,此时需要一次到
Python分析5000+抖音大V,发现大家都喜欢这类视频!
最近,小F在知乎上看到一个关于抖音的问题。 里面提到了,目前我国人均每天刷短视频110分钟。 看这数据,看来小F又被平均了。 不过老实说,只要一打开抖音,小F确实是有一种停不下来的感觉~ 所以还是少刷抖音,多看书。要不然时间全流逝了。 本期就给大家用数据分析一下在抖音,什么类型的视频最受欢迎。 / 01 / 数据获取 数据来自于第三方监
一篇文章带你了解JavaScript随机数
一、Math.random()Math.random() 返回0到1之间的随机数(包括0,不包括1)。语法:Math.random(); // returns a random number代码: 项目 JavaScript Math.random() 单击按钮以显示0(含)和1(不含)之间的随
记录 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);
巨量星图发布直播间业务流程让买卖更简易
巨量星图直播间业务流程将聚集抖音短视频、今日今日头条和西瓜小视频所有主播资源。此次发布为1.0版本号,早期对外开放抖音主播。现阶段,第一批抖音短视频Top直播间大咖已进驻。顾客根据「我的星图」「直播主播」「抖音主播」点一下,就可以进到。直播间买卖步骤和小视频买卖同样,顾客在网络主播城市广场挑选大咖、选购网络主播并填好每日任务规定,即进行提交订单。履单全过程中
什么是巨量引擎广告投放平台
是字节跳动集团的商业营销平台。现在,在抖音的头条和广告,比如在抖音宣传的淘宝、京东,还有抖音feed直播发货、鲁班发货等的推广。通过一个巨大的引擎交付平台交付。如何在巨量引擎广告平台上创建广告群?选择推广目的。点击“推广管理”,在巨量引擎的广告平台上选择“新广告群”,然后根据你推广的产品或服务类型选择推广目的。推广目标包括应用推广、销售线索收集、抖音推广、店
抖音广告投放的四种方式
有四种主要的方式。向下看:1.官方:官方为你预留了一个短视频空间。把视频放在上面。很简单,也很粗鲁。但是这种广告比较生硬,会让用户觉得这个视频是广告,容易让用户产生抵触心理。2.在颤音平台上使用四种传递模式:(1) 抖音开屏广告。可以通过短视频展示,因为开场广告作为颤音平台上的第一个入口,视觉冲击力强,能够强力锁定新生代用户的主力军。(2) 抖音信息流GD单