浅谈JavaScript节流和防抖函数

概念

节流函数

间隔固定的时间执行传入的方法

目的是防止函数执行的频率过快,影响性能.常见于跟滚动,鼠标移动事件绑定的功能.

防抖函数

对于接触过硬件的人也许更好理解,硬件按钮按下时,由于用户按住时间的长短不一,会多次触发电流的波动,加一个防抖函数就会只触发一次,防止了无意义的电流波动引起的问题.

按键防反跳(Debounce)为什么要去抖动呢?机械按键在按下时,并非按下就接触的很好,尤其是有簧片的机械开关,会在接触的瞬间反复的开合多次,直到开关状态完全改变。

应用在前端时,常见的场景是,输入框打字动作结束一段时间后再去触发查询/搜索/校验,而不是每打一个字都要去触发,造成无意义的ajax查询等,或者与调整窗口大小绑定的函数,其实只需要在最后窗口大小固定之后再去执行动作.

自己的实现

防抖函数

关键点在于每次触发时都清空延时函数的手柄,只有最后一次触发不会清空手柄,所以最后一次触发会等默认的1s后去执行debounce传入的参数函数f. debounce内部返回的闭包函数,是真正每次被调用触发的函数,不再是原本的f,所以这里的arguments取闭包函数环境变量中的arguments并在执行f时传给f,在setTimeout函数的外面取得.

let debounce = function(f, interval = 1000) {
  let handler = null;
  return function() {
   if (handler) {
    clearTimeout(handler);
   }
   let arg = arguments;
   handler = setTimeout(function() {
    f.apply(this, arg);
    clearTimeout(handler);
   }, interval)
  }
 }

应用:

let input = document.querySelector('#input');
 input.addEventListener('input', debounce(function(e) {
  console.log("您的输入是",e.target.value)
 }))

更高级的实现还会考虑到,以leading和trailing作为参数,起始先执行一次函数并消除后面的抖动,还是最后执行一下函数,消除前面的抖动,如同我这里的例子.后面分析loadash的防抖函数时会详细解析.

节流函数

let throttle = function(f,gap = 300){
   let lastCall = 0;
   return function(){
    let now = Date.now();
    let ellapsed = now - lastCall;
    if(ellapsed < gap){
     return
    }
    f.apply(this,arguments);
    lastCall = Date.now();
   }
  }

闭包函数在不断被调用的期间,去记录离上一次调用间隔的时间,如果间隔时间小于节流设置的时间则直接返回,不去执行真正被包裹的函数f.只有间隔时间大于了节流函数设置的时间gap,才调用f,并更新调用时间.

应用:

document.addEventListener('scroll', throttle(function (e) {
  // 判断是否滚动到底部的逻辑
  console.log(e,document.documentElement.scrollTop);
 }));

lodash源码分析

以上是对节流防抖函数最基础简单的实现,我们接下来分析一下lodash库中节流防抖函数的分析.

节流函数的使用

$(window).on('scroll', _.debounce(doSomething, 200));
function debounce(func, wait, options) {
  var lastArgs,
   lastThis,
   result,
   timerId,
   lastCallTime = 0,
   lastInvokeTime = 0,
   leading = false,
   maxWait = false,
   trailing = true;

  if (typeof func != 'function') {
   throw new TypeError(FUNC_ERROR_TEXT);
  }
  wait = wait || 0;
  if (isObject(options)) {
   leading = !!options.leading;
   maxWait = 'maxWait' in options && Math.max((options.maxWait) || 0, wait);
   trailing = 'trailing' in options ? !!options.trailing : trailing;
  }

  function invokeFunc(time) {
   var args = lastArgs,
    thisArg = lastThis;

   lastArgs = lastThis = undefined;
   lastInvokeTime = time;
   result = func.apply(thisArg, args);
   return result;
  }

  function leadingEdge(time) {
   console.log("leadingEdge setTimeout")
   // Reset any `maxWait` timer.
   lastInvokeTime = time;
   // Start the timer for the trailing edge.
   timerId = setTimeout(timerExpired, wait);
   // Invoke the leading edge.
   return leading ? invokeFunc(time) : result;
  }

  function remainingWait(time) {
   var timeSinceLastCall = time - lastCallTime,
    timeSinceLastInvoke = time - lastInvokeTime,
    result = wait - timeSinceLastCall;
    console.log("remainingWait",result)
   return maxWait === false ? result : Math.min(result, maxWait - timeSinceLastInvoke);
  }

  function shouldInvoke(time) {
   console.log("shouldInvoke")
   var timeSinceLastCall = time - lastCallTime,
    timeSinceLastInvoke = time - lastInvokeTime;
   console.log("time",time,"lastCallTime",lastCallTime,"timeSinceLastCall",timeSinceLastCall)
   console.log("time",time,"lastInvokeTime",lastInvokeTime,"timeSinceLastInvoke",timeSinceLastInvoke)
   console.log("should?",(!lastCallTime || (timeSinceLastCall >= wait) ||
    (timeSinceLastCall < 0) || (maxWait !== false && timeSinceLastInvoke >= maxWait)))
   // Either this is the first call, activity has stopped and we're at the
   // trailing edge, the system time has gone backwards and we're treating
   // it as the trailing edge, or we've hit the `maxWait` limit.
   return (!lastCallTime || (timeSinceLastCall >= wait) ||
    (timeSinceLastCall < 0) || (maxWait !== false && timeSinceLastInvoke >= maxWait));
  }

  function timerExpired() {
   console.log("timerExpired")
   var time = Date.now();
   if (shouldInvoke(time)) {
    return trailingEdge(time);
   }
   console.log("Restart the timer.",time,remainingWait(time))
   // Restart the timer.
   console.log("timerExpired setTimeout")
   timerId = setTimeout(timerExpired, remainingWait(time));
  }

  function trailingEdge(time) {
   clearTimeout(timerId);
   timerId = undefined;

   // Only invoke if we have `lastArgs` which means `func` has been
   // debounced at least once.
   console.log("trailing",trailing,"lastArgs",lastArgs)
   if (trailing && lastArgs) {
    return invokeFunc(time);
   }
   lastArgs = lastThis = undefined;
   return result;
  }

  function cancel() {
   if (timerId !== undefined) {
    clearTimeout(timerId);
   }
   lastCallTime = lastInvokeTime = 0;
   lastArgs = lastThis = timerId = undefined;
  }

  function flush() {
   return timerId === undefined ? result : trailingEdge(Date.now());
  }

  function debounced() {
   var time = Date.now(),
    isInvoking = shouldInvoke(time);
   console.log("time",time);
   console.log("isInvoking",isInvoking);
   lastArgs = arguments;
   lastThis = this;
   lastCallTime = time;

   if (isInvoking) {
    if (timerId === undefined) {
     return leadingEdge(lastCallTime);
    }
    // Handle invocations in a tight loop.
    clearTimeout(timerId);
    console.log("setTimeout")
    timerId = setTimeout(timerExpired, wait);
    return invokeFunc(lastCallTime);
   }
   return result;
  }
  debounced.cancel = cancel;
  debounced.flush = flush;
  return debounced;
 }

ref

https://css-tricks.com/debouncing-throttling-explained-examples/

https://github.com/lodash/lodash/blob/4.7.0/lodash.js#L9840

https://jinlong.github.io/2016/04/24/Debouncing-and-Throttling-Explained-Through-Examples/

以上就是浅谈JavaScript节流和防抖函数的详细内容,更多关于JavaScript节流和防抖函数的资料请关注我们其它相关文章!

(0)

相关推荐

  • 浅析JavaScript 函数防抖和节流

    函数防抖和节流都是对高频动作触发回调函数的一个优化,实现方式上有类似之处.先从使用场景做个区分. 防抖使用场景: 表单输入框校验 提交按钮避免重复提交 节流使用场景: scroll,mousemove,resize等 函数防抖(debounce) 表单输入框校验在用户不停的打字输入时并不需要向后台校验文本,只有当用户停下来一定时间后,这时候默认用户已经输入完毕了可以开始向后台提交文本了. 表单的提交按钮被用户多次连续点击时,显然并不需要每次点击都提交表单.仅在用户不点击之后,把最后一次的点击操作

  • 如何解决js函数防抖、节流出现的问题

    React中使用防抖函数和节流函数 在React事件调用时,React传递给事件处理程序是一个合成事件对象的实例.SyntheticEvent对象是通过合并得到的. 这意味着在事件回调被调用后,SyntheticEvent 对象将被重用并且所有属性都将被取消. 这是出于性能原因. 因此,您无法以异步方式访问该事件.React合成事件官方文档 所以在用防抖或节流函数封装时,异步方式访问事件对象出现问题.解决的方法如下: 方法一:调用合成事件对象的persist()方法 event.persist

  • 深入了解JavaScript 防抖和节流

    概述 说明 在项目过程中,经常会遇到一个按钮被多次点击并且多次调用对应处理函数的问题,而往往我们只需去调用一次处理函数即可.有时也会遇到需要在某一规则内有规律的去触发对应的处理函数,所以就需要使用到函数防抖与函数节流来帮助我们实现我们想要的结果以及避免不必要的问题产生. 函数防抖(debounce) 定义:当持续触发事件时(如连续点击按钮多此),一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,有一次触发了事件,就重新开始延时. 原理:维护一个计时器,规定在延时时间后

  • 一文看懂如何简单实现节流函数和防抖函数

    前言 在日常开发中有很多场景我们都需要用到节流函数和防抖函数,比如:实现输入框的模糊查询因为需要轮询ajax,影响浏览器性能,所以需要用到节流函数:实现手机号.姓名之类的的验证,往往我们只需要验证一次,这个时候我们就需要用到防抖函数:但是网上的很多资料都是不够具体和便于理解.今天自己翻阅了一些资料之后,来简单的谈谈我对节流函数和防抖函数的理解,希望能帮助大家理解: 节流函数 顾名思义,就是节省流量节省内存性能的一种函数,可以理解为是一种性能优化方案: 举个例子:一个水龙头一直在滴水,可能一次性会

  • 简单实现节流函数和防抖函数过程解析

    在日常开发中有很多场景我们都需要用到节流函数和防抖函数,比如:实现输入框的模糊查询因为需要轮询ajax,影响浏览器性能,所以需要用到节流函数:实现手机号.姓名之类的的验证,往往我们只需要验证一次,这个时候我们就需要用到防抖函数:但是网上的很多资料都是不够具体和便于理解.今天自己翻阅了一些资料之后,来简单的谈谈我对节流函数和防抖函数的理解,希望能帮助大家理解: 节流函数 顾名思义,就是节省流量节省内存性能的一种函数,可以理解为是一种性能优化方案: 举个例子:一个水龙头一直在滴水,可能一次性会滴很多

  • JS防抖和节流实例解析

    日常开发过程中,滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿,这时候我们更希望把多次计算合并成一次,只操作一个精确点,JS把这种方式称为debounce(防抖)和throttle(节流) 函数防抖 当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定时间到来之前,又触发了事件,就重新开始延时.也就是说当一个用户一直触发这个函数,且每次触发函数的间隔小于既定时间,那么防抖的情况下只会执行一次. function debounce(fn, wait) { va

  • js防抖函数和节流函数使用场景和实现区别示例分析

    本文实例讲述了js防抖函数和节流函数使用场景和实现区别.分享给大家供大家参考,具体如下: 开发过程中,都遇到过某个事件被频发触发的场景,比如resize,scroll事件,input事件,而对应的事件处理函数也会被高频率调用,这时会增加浏览器负担,用户体验也不好,这也是防抖函数和节流函数存在的意义和使用场景. 函数防抖(debounce): 持续触发事件时,在设定时间段内没有被触发,才去调用事件处理函数,在设定时间段内如果事件又被触发,则不调用事件处理函数,并从触发事件时间重新开始延时. 具体实

  • JS中的防抖与节流及作用详解

    概念 函数防抖(debounce)是指在一定时间内,在动作被连续频繁触发的情况下,动作只会被执行一次,也就是说当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间,所以短时间内的连续动作永远只会触发一次,比如说用手指一直按住一个弹簧,它将不会弹起直到你松手为止. 函数节流是指一定时间内执行的操作只执行一次,也就是说即预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期,一个比较形象的例子是如果将水龙头拧紧直到水是以水滴的形式流出

  • 浅谈JavaScript节流和防抖函数

    概念 节流函数 间隔固定的时间执行传入的方法 目的是防止函数执行的频率过快,影响性能.常见于跟滚动,鼠标移动事件绑定的功能. 防抖函数 对于接触过硬件的人也许更好理解,硬件按钮按下时,由于用户按住时间的长短不一,会多次触发电流的波动,加一个防抖函数就会只触发一次,防止了无意义的电流波动引起的问题. 按键防反跳(Debounce)为什么要去抖动呢?机械按键在按下时,并非按下就接触的很好,尤其是有簧片的机械开关,会在接触的瞬间反复的开合多次,直到开关状态完全改变. 应用在前端时,常见的场景是,输入框

  • 浅谈JavaScript节流与防抖

    目录 节流与防抖 概念: 区别 节流实现 节流函数 防抖实现 防抖函数 防抖升级版 总结 节流与防抖 概念: 区别 节流实现 节流函数 防抖实现 防抖函数 防抖升级版 总结 节流与防抖 背景:当我们频繁去请求资源.接口等其他的时候,就会造成操作Dom频繁,接口压力大等等,性能下降.比如我有时候会每次搜索会猛地敲回车,在网络不很好的时候,点击下一页按钮的时候也会一直点,可能网络不好也可能服务器性能低. 为了避免频繁触发同一事件或请求,这时候就要用到节流和防抖了. what?这是啥?当我第一次听到这

  • 浅谈JavaScript中变量和函数声明的提升

    现象: 1. 在JavaScript中变量和函数的声明会提升到最顶部执行. 2. 函数的提升高于变量的提升. 3. 函数内部如果用var声明了相同名称的外部变量,函数将不再向上寻找. 4. 匿名函数不会提升. 5. 不同<script>块中的函数互不影响. 例子: 函数声明提升高于变量声明 //同时声明变量a和函数a var a; function a() {} alert(typeof a); //显示的是"function",初步证明function的优先级高于var.

  • 如何在面试中手写出javascript节流和防抖函数

    面试的时候我们经常会问别人是理解什么是节流和防抖,严格的可能要求你写出节流和防抖函数,这里我们抛开loadsh工具库手写节流和防抖 1.节流函数throttle // 节流方案1,每delay的时间执行一次,通过开关控制 function throttle(fn, delay, ctx) { let isAvail = true return function () { let args = arguments // 开关打开时,执行任务 if (isAvail) { fn.apply(ctx,

  • 浅谈javascript语法和定时函数

    一.JavaScript基本语法. (一)数据类型与变量类型. 整数,小数,布局,字符串,日期时间,数组 强制转换: parseInt() parseFloat() isNaN() (二)数组 var 数组名 = new Array([长度]); //"假冒"数组 a.length-长度 a[下标] = 值. a[下标] (三)函数 复制代码 代码如下: function 函数名(形参) { } function ShowStr(a) { } 二.DOM操作 DOM - Documen

  • 浅谈Javascript中的函数、this以及原型

    关于函数 在Javascript中函数实际上就是一个对象,具有引用类型的特征,所以你可以将函数直接传递给变量,这个变量将表示指向函数"对象"的指针,例如: function test(message){ alert(message); } var f = test; f('hello world'); 你也可以直接将函数申明赋值给变量: var f = function(message){ alert(message); }; f('hello world'); 在这种情况下,函数申明

  • 浅谈javascript:两种注释,声明变量,定义函数

    JavaScript:单行注释用//呵呵呵呵:多行注释用/*hdhdhdh*/ javascript中区别大小写,定义变量使用关键字var,语法如下:var 变量名,其中变量从编程角度讲,变量是用于存储某种/某些数值的存储器. javascript函数调用: 以上就是小编为大家带来的浅谈javascript:两种注释,声明变量,定义函数全部内容了,希望大家多多支持我们~

  • 浅谈javascript的url参数parse和build函数

    Parse: function getParam() { var param = new Object() var item = new Array(); if (location.search == "") { return param; }; var query = location.search.substring(1); var list = query.split('&'); for(var i = 0; i < list.length; i++) { item

  • 浅谈JavaScript函数的四种存在形态

    函数的四种存在形态: 1.函数形态 2.方法形态 将函数赋值给某一个对象的成员,那么就称为方法 3.构造器形态 4.上下文形态 1.函数形态: var foo = function() { alert(this); //this是window }; 2.方法形态: o = {}; o.foo = foo; //将函数foo赋值给对象o的foo属性 o.foo(); //弹出的是object,此时的this表示object var lib = { test:function() { alert(t

  • 浅谈JavaScript 函数参数传递到底是值传递还是引用传递

    在传统的观念里,都认为JavaScript函数传递的是引用传递(也称之为指针传递),也有人认为是值传递和引用传递都具备.那么JS的参数传递到底是怎么回事呢?事实上以下的演示也完全可以用于Java 首先来一个比较简单的,基本类型的传递: function add(num){ num+=10; return num; } num=10; alert(add(num)); aelrt(num); //输出20,10 对于这里的输出20,10,按照JS的官方解释就是在基本类型参数传递的时候,做了一件复制

随机推荐