JavaScript如何实现防抖函数和节流函数?

防抖函数:

防抖函数会在函数触发后等待一段时间,如果在这段时间内再次触发,则重新计时。只有当不再触发时,函数才会执行。

function debounce(func, delay) {
  let timeout;
//利用clearTimeout()清除倒计时

  return function(...args) {
    clearTimeout(timeout);
    
//利用setTimeout()定时器
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 设置时间300ms

const debouncedFunc = debounce(() => {
  console.log('Debounced function executed');
}, 300);

debouncedFunc();
debouncedFunc();
debouncedFunc(); // 在300ms内只会执行一次哦

节流函数:

节流函数会在一段时间内只允许函数触发一次,无论触发频率如何。

function throttle(func, interval) {
  let lastTime = 0;
  
  return function(...args) {
    const now = Date.now();
//Date.now() 现在的时间 
    if (now - lastTime >= interval) {
      func.apply(this, args);
      lastTime = now;
    }
  };
}

// 使用示例
const throttledFunc = throttle(() => {
  console.log('Throttled function executed');
}, 300);

throttledFunc();
throttledFunc();
throttledFunc(); // 在300ms内只会执行一次

👏根据实际情况修改,欢迎点评补充

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值