debounce(防抖)、throttle(节流/限频)

JS throttle与debounce的区别(有实现代码)https://segmentfault.com/a/1190000014292298
js 函数的防抖(debounce)与节流(throttle)(有更详细的实现代码)https://www.cnblogs.com/cc-freiheit/p/10827372.html

// 去抖就是连续多次delay内的操作取执行最开始的那一次或最后一次操作真正执行,下方代码是合成版
// 防止用户的连续多次click提交;scroll下拉刷新时,同一位置多次请求数据
/**
 * @desc 函数防抖
 * @param func 目标函数
 * @param wait 延迟执行毫秒数
 * @param immediate true - 立即执行, false - 延迟执行
 */
function debounce(func, wait, immediate) {
    let timer;
    return function() {
      let context = this,
          args = arguments;
           
      if (timer) clearTimeout(timer);
      if (immediate) {
        let callNow = !timer;
        timer = setTimeout(() => {
          timer = null;
        }, wait);
        if (callNow) func.apply(context, args);
      } else {
        timer  = setTimeout(() => {
          func.apply(context, args);
        }, wait)
      }
    }
}
// 节流就是连续多次delay内的操作按照指定的间隔来执行
// scroll设置定位等的频繁位置计算;拖拽的频繁位置计算等
function throttle(func, wait) {
    let lastTime
    return function(...rest) {
        if (!lastTime || (new Date().getTime() - lastTime > wait)) {
            lastTime = +new Date()
            func.apply(this, rest)
        }
    }
}

性能提速:debounce(防抖)、throttle(节流/限频):https://www.cnblogs.com/hity-tt/p/7852888.html

什么是防抖和节流?https://www.cnblogs.com/cuixiaohua/p/12709663.html

posted @ 2020-11-10 18:13  姑苏城外小白  阅读(224)  评论(0编辑  收藏  举报