函数节流与函数防抖

函数节流

适用场景:按钮防重复点击

/**
 * 函数节流  delay时间内,连续发起多个请求,只执行第一个请求
 * @param fun
 * @param delay
 * @returns {function()}
 */
const throttle = (fun, delay) => {
  let last = null;
  return (...cc) => {
    const now = + new Date();
    if (now - last > delay) {
      fun(...cc);
      last = now;
    }
  }
};

函数防抖

适用场景:input输入框搜索

/**
 * 函数防抖  delay时间内,连续发起多个请求,只执行最后一个请求
 * @params fun 需要防抖的方法
 * @params delay 毫秒数
 */
const debounce = (fun, delay) => {
  let timer = null;
  return (...cc) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fun(...cc);
    }, delay);
  }
};
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 函数节流 还记得上篇文章中说到的图片懒加载吗?我们在文章的最后实现了一个页面滚动时按需加载图片的方式,即在触发滚动...
    柏丘君阅读 2,863评论 1 19
  • 前言 在类似scroll、resize事件中执行大量DOM操作或者计算时,就会出现再次触发事件而上一次事件中的DO...
    王阿王阅读 989评论 0 2
  • 反复作,往往会是女生一贯的伎俩。要的无非是对方的回应,在乎你非你不可的回应,但是回想起来,他并不是你个人的所有物品...
    AhhT阅读 2,786评论 1 1
  • 如果有一天,你找不到我了,千万不要难过,不是我不爱你了,而是我终于有了勇气离开,但请你记得,在这之前,我真的有傻...
    尘_寞阅读 70评论 0 0