什么是防抖

函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。如下图,持续触发 scroll 事件时,并不执行 handle 函数,当 1000 毫秒内没有触发 scroll 事件时,才会延时触发 scroll 事件。

防抖应用场景如下

  • 搜索框输入查询,如果用户一直在输入中,没有必要不停地调用去请求服务端接口,等用户停止输入的时候,再调用,设置一个合适的时间间隔,有效减轻服务端压力。
  • 表单验证
  • 按钮提交事件。
  • 浏览器窗口缩放,resize 事件 (如窗口停止改变大小之后重新计算布局) 等。
  • 具体实现

    • 非立即执行版

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

      非立即执行版的意思是触发事件后函数不会立即执行,而是在 n 秒后执行,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。

    • 立即执行版

      JAVASCRIPT
      function debounce(func,wait) {
      let timeout;
      return function () {
      let context = this;
      let args = arguments;
      if (timeout) clearTimeout(timeout);
      let callNow = !timeout;
      timeout = setTimeout(() => {
      timeout = null;
      }, wait)
      if (callNow) func.apply(context, args)
      }
      }

      立即执行版的意思是触发事件后函数会立即执行,然后 n 秒内不触发事件才能继续执行函数的

      什么是节流

      函数节流(throttle):当持续触发事件时,保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水,阀门一打开,水哗哗的往下流,秉着勤俭节约的优良传统美德,我们要把水龙头关小点,最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴。如下图,持续触发 scroll 事件时,并不立即执行 handle 函数,每隔 1000 毫秒才会执行一次 handle 函数。

      节流应用场景:

      • 按钮点击事件
      • 拖拽事件
      • onScoll
      • 计算鼠标移动的距离 (mousemove)

      具体实现

      • 时间戳版

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

        当高频事件触发时,第一次会立即执行(给 scroll 事件绑定函数与真正触发事件的间隔一般大于 delay,如果你非要在网页加载 1000 毫秒以内就去滚动网页的话,我也没办法 o (╥﹏╥) o),而后再怎么频繁地触发事件,也都是每 delay 时间才执行一次。而当最后一次事件触发完毕后,事件也不会再被执行了 (最后一次触发事件与倒数第二次触发事件的间隔小于 delay,为什么小于呢?因为大于就不叫高频了呀 (╹▽╹))。

      • 定时器版

        JAVASCRIPT
        function throttle(func, wait) {
        let timeout;
        return function() {
        let context = this;
        let args = arguments;
        if (!timeout) {
        timeout = setTimeout(() => {
        timeout = null;
        func.apply(context, args)
        }, wait)
        }
        }
        }

        当触发事件的时候,我们设置一个定时器,再次触发事件的时候,如果定时器存在,就不执行,直到 delay 时间后,定时器执行执行函数,并且清空定时器,这样就可以设置下个定时器。当第一次触发事件时,不会立即执行函数,而是在 delay 秒后才执行。而后再怎么频繁触发事件,也都是每 delay 时间才执行一次。当最后一次停止触发后,由于定时器的 delay 延迟,可能还会执行一次函数。

        节流中用时间戳或定时器都是可以的。更精确地,可以用时间戳 + 定时器,当第一次触发事件时马上执行事件处理函数,最后一次触发事件后也还会执行一次事件处理函数。

      • 定时器 + 时间戳版本

        JAVASCRIPT
         
        // 节流throttle代码(时间戳+定时器):
        var throttle = function(func, delay) {
        var timer = null;
        var startTime = Date.now();
        return function() {
        var curTime = Date.now();
        var remaining = delay - (curTime - startTime);
        var context = this;
        var args = arguments;
        clearTimeout(timer);
        if (remaining <= 0) {
        func.apply(context, args);
        startTime = Date.now();
        } else {
        timer = setTimeout(func, remaining);
        }
        }
        }

        在节流函数内部使用开始时间 startTime、当前时间 curTime 与 delay 来计算剩余时间 remaining,当 remaining<=0 时表示该执行事件处理函数了(保证了第一次触发事件就能立即执行事件处理函数和每隔 delay 时间执行一次事件处理函数)。如果还没到时间的话就设定在 remaining 时间后再触发 (保证了最后一次触发事件后还能再执行一次事件处理函数)。当然在 remaining 这段时间中如果又一次触发事件,那么会取消当前的计时器,并重新计算一个 remaining 来判断当前状态。

      总结

      • 函数防抖

        将几次操作合并为一此操作进行。原理是维护一个计时器,规定在 delay 时间后触发函数,但是在 delay 时间内再次触发的话,就会取消之前的计时器而重新设置。这样一来,只有最后一次操作能被触发。

      • 函数节流

        使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。

      • 区别

        函数节流不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数

        而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下,我们需要用户在滚动页面时,每隔一段时间发一次 Ajax 请求,而不是在用户停下滚动页面操作时才去请求数据。这样的场景,就适合用节流技术来实现。

      文章参考

       

JavaScript 中的防抖和节流的更多相关文章

  1. 来聊聊JavaScript中的防抖和节流

    目录 JavaScript防抖和节流 问题还原 防抖 什么是防抖 使用场景 节流 什么是节流 使用场景 JavaScript防抖和节流 问题还原 我们先来通过代码把常见的问题还原: <html& ...

  2. JavaScript中函数防抖、节流

    码文不易,转载请带上本文链接,感谢~ https://www.cnblogs.com/echoyya/p/14565642.html 目录 码文不易,转载请带上本文链接,感谢~ https://www ...

  3. JS中的防抖与节流

    什么是防抖?and什么是节流?一起来开心的学习下吧. 首先什么是防抖:就是在一定的时间内事件只发生一次,比如你点击button按钮,1秒内任你单身30年手速点击无数次,他也还是只触发一次.举个例子,当 ...

  4. Js中的防抖与节流函数

    1.何为防抖与节流函数呢? 1.防抖(debounce):通过setTimeout方式,在一定的时间间隔内,将多次触发的事件转化为一次触发.也就是说当一个用户一直触发这个函数,且每次触发函数的间隔小于 ...

  5. JS中的防抖和节流

    JS-防抖和节流 在进行窗口的resize.scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕.此时我们可以采用debounce(防抖)和 ...

  6. JavaScript函数的防抖和节流

    防抖 触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间 思路: 每次触发事件时都取消之前的延时调用方法 function debounce(fn) { let tim ...

  7. 输入防抖 vue # 输入搜索的时候 及时搜索的快速访问接口的 解决方案 vue 中使用防抖和节流

    输入防抖 watch: { value (newVal, oldVal) { if (this.timer) { clearTimeout(this.timer) } this.timer = set ...

  8. JavaScript 中函数节流和函数去抖的讲解

    JavaScript 中函数节流和函数去抖的讲解 我们都知道频繁触发执行一段js逻辑代码对性能会有很大的影响,尤其是在做一些效果实现方面,或者逻辑中需要进行后端请求,更是会导致卡顿,效果失效等结果,所 ...

  9. 使用rxjs以及javascript解决前端的防抖和节流

    JavaScript实现方式: 防抖 触发高频事件后 n 秒内函数只会执行一次,如果 n 秒内高频事件再次被触发,则重新计算时间:思路:每次触发事件时都取消之前的延时调用方法: 举个例子:做一个自动查 ...

随机推荐

  1. 文本分类:Keras+RNN vs传统机器学习

    摘要:本文通过Keras实现了一个RNN文本分类学习的案例,并详细介绍了循环神经网络原理知识及与机器学习对比. 本文分享自华为云社区<基于Keras+RNN的文本分类vs基于传统机器学习的文本分 ...

  2. 洛谷 P7324 - [WC2021] 表达式求值(状压+dp)

    题面传送门 现场人傻系列-- 首先建出 \(E\) 的表达式树,具体来说表达式的每一个叶子节点表示一个数组 \(A_i\),每一个非叶子节点都表示一次运算,它的值表示左右儿子进行该运算后得到的结果.这 ...

  3. R语言实战-Part 2笔记

    R 语言实战(第二版) part 2 基本方法 -------------第6章 基本图形------------------ #1.条形图 #一般是类别型(离散)变量 library(vcd) he ...

  4. Python基础笔记4

    模块 模块是一组Python代码的集合,一个.py文件就称之为一个模块(Module),按目录来组织模块称为包(Package).优点:提高了代码的可维护性:避免函数名和变量名冲突. mycompan ...

  5. MYSQL5.8----M3

    333333333333333333333333333 mysql> DESC user; +----------+---------------------+------+-----+---- ...

  6. 蛋白组DIA分析:Spectronaut软件使用指南

    官方文档: https://biognosys.com/media.ashx/spectronautmanual.pdf 0. 准备 Spectronaut软件是蛋白组DIA分析最常用的谱图解析软件之 ...

  7. echo 输出彩色字符

    借助echo的-e选项来实现,语法格式为 echo -e "\033[3xmsome things you want to print out.\033[0m" \033[3xm为 ...

  8. MariaDB——数据库登录

    登录MariaDB数据库,用root账户和密码: 显示所有数据库列表:其中,information_schema.performance_schema.test.mysql,这4个库表是数据库系统自带 ...

  9. No.1 R语言在生物信息中的应用——序列读取及格式化输出

    目的:读入序列文件(fasta格式),返回一个数据框,内容包括--存储ID.注释行(anno).长度(len).序列内容(content) 一.问题思考: 1. 如何识别注释行和序列内容行 2. 如何 ...

  10. JavaScript | 新手村(一)变量,运算和变量方法

    资料来自:JavaScript 第一步 1. 向 html 页面添加 JavaScript 1.1 内部 JavaScript 在 html 文件中的 </body> 标签前插入代码: & ...