通过原生js 实现一个节流函数和防抖函数,写出核心代码

防抖函数:

防抖函数会延迟执行函数,直到指定的间隔事件内没有新的函数调用。如果在指定的时间间隔内有新的函数调用,则会重新计时。这样可以确保只在连续触发事件停止后的指定时间间隔内才执行函数。

// 防抖函数
function debounce(func, delay) {
  let timer = null;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}

 节流函数:

节流函数会在指定的时间间隔内只执行一次。它会定时执行函数,但无论间隔时间内有多少次函数调用,都只会执行一次,这样可以确保在指定时间间隔内函数不会被频繁地执行。

// 节流函数
function throttle(func, delay) {
  let timer = null;
  return function () {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, arguments);
        timer = null;
      }, delay);
    }
  };
}

这两个函数都是通过闭包的方式实现的,节流函数throttle将在指定的延迟时间内只执行一次传入的函数,而防抖函数debouce将在指定的延迟时间内没有新的函数调用时才执行一次传入的函数

function handleScroll() {
  console.log("Scroll event");
}

// 使用节流函数,延迟 200 毫秒执行
const throttledScroll = throttle(handleScroll, 200);
window.addEventListener("scroll", throttledScroll);

// 使用防抖函数,延迟 200 毫秒执行
const debouncedScroll = debounce(handleScroll, 200);
window.addEventListener("scroll", debouncedScroll);

 handleScroll 函数将会延迟执行,确保不会在指定的延迟时间内频繁触发事件。您可以根据需要调整延迟时间,以满足您的实际需求。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值