防抖节流

防抖与节流

防抖和节流都是为了限制函数的执行频次,避免响应速度跟不上触发频率,从而导致的延迟、假死、卡顿的现象。

定义

防抖:调用动作n秒之后,才会执行该动作,如果在n秒之内又调用了此动作则重新计算执行时间;

节流:预先设置一个执行周期,当调用动作的时刻大于执行周期时,执行该动作,然后进入下一个执行周期;

区别

  1. 防抖是将多次操作合并为一次操作,节流是在一定时间内只触发一次函数

  2. 防抖只会在最后一次才触发函数,节流是在一定时间内一定会执行一次函数

  3. 防抖可以用于用户输入,节流可以用于页面滚动,无限加载

实现

// 防抖函数
function debounce(fn) {
  let timer = null;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    });
  };
}
// 处理函数
function handle() {
  console.log(value);
}
<input onChange={(value)=>debounce(handle(value))}>
// 节流函数
function throttle(fn) {
  let canRun = true;
  return function () {
    if (!canRun) return;
    canRun = false;
    setTimeout(() => {
      fn.apply(this, arguments);
      canRun = true;
    }, 500);
  };
}
function handle(e) {
  console.log(e.target.innerWidth);
}
window.addEventListener("resize", throttle(handle));
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值