js的防抖与节流

目录

一、防抖

实现方式

二、节流

实现方式

---

一、防抖

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

 性能优化的手段

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

实现方式

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

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

2、手写实现

思路：

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

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

   function debounce(fn, t) {
         let setId
       return 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) return
          flag = true
          setTimeout(function () {
            fn()
            flag = false
          }, t)
        }
      }