JS的节流和防抖

今天记录一下js的节流和防抖函数

函数节流

函数节流是优化高频率执行js代码的一种手段 可以减少高频调用函数的执行次数 作用：减少代码执行次数, 提升网页性能

应用场景：oninput / onmousemove / onscroll / onresize 等事件

let timerId = null;
let flag = true;
window.onresize = function () {
if (!flag) return;
flag = false;
timerId && clearInterval(timerId);
timerId = setTimeout(function () {
flag = true;
console.log("尺寸变化");
}, 500);
}

封装一个节流函数

function throttle(fn, delay){
let timer = null
return function (){
// 如果已经有定时器了，那么就退出
if(timer) return
// 获取debounce执行作用域的this
let _this = this
// 获取参数
let args = arguments
timer = setTimeout(function(){
// 改变执行函数内部的this指向debounce执行作用域的this，并把参数传给执行函数
fn.apply(_this, args)
// 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
   timer = null
    }, delay)
  }
}

函数防抖

函数防抖是也优化高频率执行js代码的一种手段 可以让被调用的函数在一次连续的高频操作中只被调用一次

作用：减少代码执行次数, 提升网页性能

应用场景：oninput / onmousemove / onscroll / onresize 等事件

封装一个防抖函数

方便防抖函数的调用和回调函数fn的传参问题，这里使用闭包来设计防抖函数

function debounce(fn, delay){
let timer = null
return function(){
// 设置了定时器就清空这个定时器，没有就去设置定时器
timer && clearTimeout(timer)
// 获取debounce执行作用域的this
let _this = this
// 获取参数
let args = arguments
timer = setTimeout(function(){
fn.apply(_this, args)
   }, delay)
  }
}

函数节流和函数防抖区别

函数节流是减少连续的高频操作函数执行次数 (例如连续调用10次, 可能只执行3-4次)

函数防抖是让连续的高频操作时函数只执行一次(例如连续调用10次, 但是只会执行1次)