防抖与节流

防抖

作用与简介

在一个周期T内，如果重复的进行某种响应操作，在不设置防抖函数的时候，每操作一次都会调用一遍响应函数。设置了防抖函数，如果这一次操作与上一次操作的间隔小于T，则不会调用响应函数，并让计时器重新从0开始计时，直到某次操作与上次操作间隔大于等于T,才执行。
防抖函数分为立即执行的防抖函数和延迟执行的防抖函数。
立即执行的防抖函数就是当满足时间间隔大于T这一条件时进行操作就立即调用响应函数进行响应。
延迟执行的防抖函数则是从0开始计时，直到某次响应之后计时器能达到T，才会响应。

实现

/** @param  {function}   func      回调函数* @param  {number}     wait      表示时间间隔* @param  {boolean}    immediate  如果为true则为立即执行，为false则为延迟执行                             * @return {function}             返回客户调用函数*/
function debounce(func,wait,immediate) {let timeout,result; // timeout 为计时器，result为回调函数的返回值let debounced = function() {if(timeout)clearTimeout(timeout); // 如果计时器存在，要将其清除，以便重新建立新的计时器（防抖的核心）let context = this; // 暂存debounced的this指向，其指向响应函数，方便后续改变func的this指向let args = arguments; // 暂存响应函数的event参数，以便后续将其赋给funif(immediate) {let flag = !timeout; // 判断此时是否还在上一个计时中timeout = setTimeout(function(){timeout = null;},wait);   // 设定计时器，在wait时间之后，把计时器赋为空，以便那时能立即执行if(flag) result = func.apply(context,args); // 若满足条件，则立即执行}else {// 不是立即执行模式则设置延迟执行函数timeout = setTimeout(function() {func.apply(context,args);},wait);  }return result;}// 取消计时器的操作debounced.cancel = function() {clearTimeout(timeout);timeout = null;}return debounced;
}

核心与细节

实现的核心是计时器函数，通过在函数开头清除计时器的操作，来重新计时。
最难以理解的应该是

          if(immediate) {let flag = !timeout; // 判断此时是否还在上一个计时中timeout = setTimeout(function(){timeout = null;},wait);   // 设定计时器，在wait时间之后，把计时器赋为空，以便那时能立即执行if(flag) result = func.apply(context,args); // 若满足条件，则立即执行}

在该代码块中，timeout被赋值，在wait时间之内都不为null，所以在这wait时间内进行响应操纵，flag都为false,即不立即执行，并且计时器重新开始计时。只有当在wait时间内不进行响应操作，timeout在wait时间之后被置为null，再次响应的时候才能立即执行。

应用场景

1.scroll事件滚动触发
2.搜索框输入查询
3.表单验证
4.按钮提交事件
5.浏览器窗口缩放,resize事件

节流

作用与简介

节流与防抖有相似之处，本质上来说两者都是为了防止前端频繁进行响应操作而设置的，二者的差别在于防抖会在某次操作重新进行计时，而节流则不会，节流是从第一次操作开始计时，周期性的判断是否有响应，如果有则执行。

实现

/** @param  {function}   func      回调函数* @param  {number}     wait      表示时间窗口的间隔* @param  {object}     options   如果想忽略开始函数的的调用，传入{leading: false}。*                                如果想忽略结尾函数的调用，传入{trailing: false}*                                两者不能共存，否则函数不能执行* @return {function}             返回客户调用函数*/
function throttle(func, wait, options) {let context, args, timeout;let old = 0; // 时间戳if (!options) options = {}; // 如果没有该参数，则置为0，防止意外发生return function () {context = this;args = arguments;let now = new Date().valueOf();if (options.leading === false && old == 0) old = now; // 不要立即执行，则第一次不会进入if(now-old>wait)if (now - old > wait) {   // 当时间间隔达到一个周期则执行此代码块// 第一次会直接执行if (timeout) {            // 将计时器清除，防止执行两次响应函数clearTimeout(timeout);timeout = null;}func.apply(context, args);old = now;} else if (!timeout && options.trailing !== false) { // 当时间间隔未达到一个周期时则执行此代码块// 最后一次被执行timeout = setTimeout(function() {  // 在一般情况下是不会执行这个延迟函数的，只有在最后一次执行此延迟函数old = new Date().valueOf();    // 在最后一次执行时候将old置为当前时间，防止下一次操作响应的时间间隔不足waittimeout = null;func.apply(context, args);}, wait)}}
}

核心与细节

节流函数的实现相比防抖函数要复杂一些，难点就在于options的选项，options选项有三种，为

第一次立即执行，最后一次不执行 {leading:true,trailing:false}
第一次立即执行，最后一次执行 {leading:true,trailing:false}
第一次不立即执行，最后一次执行 {leading:false,trailing:true}

注：当设置为{leading:false,trailing:false} 时，函数并不会显示出应有的效果，而会显示出类似{leading:true,trailing:false}的效果，但是仍有区别，区别在于第一次不是立即执行。

应用场景

DOM元素的拖拽功能实现
射击游戏
计算鼠标移动的距离
监听scroll滚动事件

全网最详细JavaScript防抖、节流函数解析相关推荐

Javascript防抖函数节流函数的介绍(最详细)、彻底搞懂防抖节流的区别以及使用第三方库的防抖节流函数
文章目录 1.防抖节流函数介绍 1.1 认识防抖节流函数 1.2 认识防抖函数 1.3 防抖函数应用 1.4 认识节流函数 1.5 节流函数应用 1.6 生活中的例子 2.Underscore库 2. ...
前端性能优化经典：javascript防抖节流
大家好,我是前端岚枫,一枚二线城市的程序媛,今天主要跟大家分享我整理的前端的一些性能优化,js防抖节流,它是项目比较常见的性能优化方案,也是面试中常遇到的问题.希望下面文章对大家有所帮助. 我们在 ...
vue防抖注册全局_vue防抖节流函数---组件封装,防止按钮多次点击
/** * @param {function} func 执行函数 * @param {number} time 防抖节流时间 * @param {boolean} isDebounce [1,3]为 ...
【从基础概念到手写】防抖-节流函数的基本实现和补充
文章目录前言防抖函数概念和应用场景手写实现防抖函数节流函数概念和应用场景手写实现节流函数前言防抖和节流函数是我们在平常开发的时候,比较常用的两个工具函数,使用防抖和节流函数可以提高我 ...
AndroidRNFlutter实战——防抖节流函数
1.背景介绍防抖函数防抖,这里的抖动就是执行的意思,而一般的抖动都是持续的,多次的.假设函数持续多次执行,我们希望让它冷静下来再执行.也就是当持续触发事件的时候,函数是完全不执行的,等最后一次触发 ...
全网最详细的 I/O 多路复用解析
前言 IO多路复用目前在大厂的面试中,一般在两个地方可能会被问到,一个是在问到网络这一块的时候,另一个是在问到 Redis 这一块的时候,因为 Redis 底层也是使用了IO多路复用,所以整体来说 I ...
全网最详细完备的class类文件结构解析
写在前面本文隶属于专栏<100个问题搞定Java虚拟机>,该专栏为笔者原创,引用请注明来源,不足和错误之处请在评论区帮忙指出,谢谢! 本专栏目录结构和文献引用请见100个问题搞定Java ...
手把手教你在vue中使用自定义指令全局封装防抖节流函数
第一步在src下创建utils文件夹并创建common.js文件 //'@/utils/common.js' 文件function throttle(bindObj, fn, delay) {bind ...
vue 接口节流_vue防抖节流之v-debounce--throttle使用指南
最新封装了一个vue防抖节流自定义指令,发布到npm上,有用欢迎star,谢谢! 使用比较简单,取消利用vue注册事件,采用指令来注册事件,防抖指令v-debounce,节流指令v-debounce, ...

全网最详细JavaScript防抖、节流函数解析