JS 防抖与节流的原理分析和代码手写
前言
前一段时间,我学习了 JS 的防抖与节流,自认为掌握住了它们,当我在做面试题的时候,遇到了一道:手写节流,我当时就觉得这题稳了!然鹅,当我结束题目,再去翻看节流的代码时,发现,我磕磕绊绊写出来的,并不是正确答案!!因此,我决定再重新梳理一遍防抖和节流,并记录下来。
作用
对用户短时间内的操作进行限制,避免页面重复渲染, 降低服务器的压力,减少资源消耗,优化性能。
防抖
使用场景
例如:当用户在文本框输入一段内容时,每输入一个字符,就会触发一次事件,但这个频繁触发事件是不必要的,没用的,只需要在最后把所有的内容输入完成,再去触发相应事件即可。这个地方就用到了防抖的原理,js 会将前面所有的点击操作销毁,只会执行最后的一次操作,当最后一次执行完成,过了设置的时间间隔,这时,再次触发时,就会正常执行相应的操作。
分析原理
当用户触发一个事件,会立马产生一个计时变量 timer ,每次触发该事件之前,会先判断是否超过设置的时间间隔,如果没有超过,也就是短时间内,重复操作同一 dom ,这时,会先判断计时变量 timer 是否存在,存在的话,会将其清除,重新开始计时,同时,之前的 dom 操作也会失效,只会在最后一次触发回调函数。简单来说,在不超过设置时间间隔内,重复操作同一dom元素,只会执行最后一次。
手写代码
//参数:要执行的回调函数fn,延时时间delay,如delay = 1000 function debounce(fn,delay){ // 计时 var timer = null; return function(){ // this是触发 fn 回调函数的那个(组件)实例对象 var that = this; var args = arguments; // 如果timer已经存在,则清除 if(timer){ clearTimeout(timer); } timer = setTimeout(()=>{ fn.apply(that,args); },delay); } }
节流
使用场景
例如:用户频繁点击提交按钮,这个时候,多次的点击,提交的内容都是一样的,因此,当用户第一次点击提交按钮时,就发送请求,触发回调,而接下来的第 2 次,……第 n 次的提交操作(在设置的时间间隔内)都不触发回调函数,直到第一次的操作与第 n+1次的操作,时间超过了设置的时间间隔。也就是,当用户频繁操作 dom 元素时,在设置的时间间隔内,只执行第一次操作触发的回调。
原理分析
定义一个标志位,当超过了规定的时间间隔,标志位 flag 为 true ,执行回调函数,否则为 false ,不执行回调函数。
手写代码
export default function throttle(fn,delay){ //设置初始状态为true,允许执行fn var falg = true; return function(){ var that = this; var args = arguments; // 没有超过设置的时间间隔 if(!falg){ return false; } // 超过设置的时间间隔,允许执行fn fn.apply(that,args); // 此时是在时间间隔内,将标志位设置为false,禁止执行fn flag = false; setTimeout(()=>{ // 超过时间间隔,把标志位设置为true,允许执行fn flag = true; },delay); } }
小补充
Vue 框架中,已经为我们事先封装好防抖和节流的代码,只需要执行命令 npm install 安装即可。