当前位置：网站首页>防抖函数和节流函数

防抖函数和节流函数

2022-04-22 04:58:00 【苦糖zym】

防抖函数

顾名思义，防止你手抖不小心点了两次，或者说一直在抖

第一种，比如模糊搜索，人一直在输入，我们希望他在结束输入的时候执行搜索，但是我们并不知道他什么时候结束，所以我们假装他某个时间段内没有输入，就当他输入完成

function generateDebounce(fn, delay) {
    let timer
    let args
    return function() {
        args = arguments
        window.clearTimeout(timer)
        timer = window.setTimeout(() => {
            fn(...args)
        }, delay)
    }
}

第二种防抖，点击登录按钮，然后不小心点了多次，这种比较简单

let loading = false
async function onClickLogin() {
    if (loading) return
    loading = true
    const result = await login(/** ...someArgs */)
    loading = false
}

节流函数

顾名思义，节省流量，这个和防抖很像，区别在于它是故意而为之，我们希望连续的执行方法在一个间断内执行，比如我们滚动条事件，我们搞了图片懒加载，我们需要实时对比滚动条的位置，但是不需要每次对比都执行一次，我们只需要让用户看上去是连续的就可以了

function generateThrottled(delay, callback) {
  let timer
  let args
  return function throttled() {
    args = arguments
    if (timer) return
    timer = window.setTimeout(() => {
      callback(...args)
      timer = null
    }, delay)
  }
}

版权声明
本文为[苦糖zym]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_42335036/article/details/124332928

边栏推荐

猜你喜欢

随机推荐