js的防抖与节流

目录

一、防抖

实现方式

二、节流

实现方式

---

一、防抖

所谓防抖，单位时间内，某个动作只能执行矗后一次，可以用在搜索框业务中。

 性能优化的手段

防抖 --- 在同一时间内 频繁触发事件,只处理最后一次

实现方式

1、用第三方库Lodash防抖的方法

   document.querySelector('input').addEventListener('input',_.debounce(function () {console.log('输入')}, 400))

2、手写实现

思路：

        当事件发生，不立即执行事件回调。给个500毫秒后执行事件回调(定时器），在500毫秒内

        再次触发事件,先取消上次的定时器，再重新开启一个定时器

   function debounce(fn, t) {let setIdreturn function () {clearTimeout(setId)setId = setTimeout(function () {fn()}, t)}}

二、节流

所谓节流，单位时间内，某个动作只能执行一次可以用在鼠标移动、页面尺寸缩放resize、滚动条滚动等场景

 性能优化的手段

  节流 - 在同一时间内 频繁触发事件,只执行一次

实现方式

1、用第三方库Lodash节流的方法

     document.querySelector('button').addEventListener('click',_.throttle(function () {console.log('发请求')}, 3000))

2、手写实现

思路

当第一次事件发生，把回调函数放到定时器 setTimeout(function () {回调调用},1000) 并且设置开关 把开关状态为true

当第二次事件发生  判断开关状态 false 可以处理当前回调， true返回

  function throttle(fn, t) {let flag = false // 一开始 false表示没有任务执行return function () {if (flag) returnflag = truesetTimeout(function () {fn()flag = false}, t)}}