节流&防抖

节流:wait时间内只能执行一次func

防抖:触发后延迟wait秒调用func

代码对比:(建议自己手敲一遍,不要养成直接cv的坏习惯)

节流:

其中的apply函数是

apply() 是 JavaScript 函数的一个方法,它用于调用函数并设置函数内部 this 关键字的指向。

throttle() 函数中,func 是传入的需要防抖的函数,args 是该函数的参数列表。当节流函数执行时,会通过 apply() 方法调用传入的函数,并将 this 指向当前的上下文环境,同时将参数 args 传递给该函数。

节流函数通常运用在限制调用频率场景

  • 搜索框输入时的实时联想
  • 拖拽场景防止超高频次触发位置变动
  • 滚动场景监听scroll事件计算位置信息,比如判断是否到页面底部自动加载更多

防抖:

防抖函数通常运用在限制调用次数场景

  • 文本输入的验证,连续输入后验证一次即可
  • 防止鼠标迅速点击多次提交按钮
  • 监听 resize 事件计算尺寸信息
javascript 复制代码
//防抖
function debounce(func, wait) {
  let timer = null;

  return function () {
    //检查是否存在定时器
    if (timer) {
      //清除定时器
      clearInterval(timer);
      timer = null;
    }

    let self = this;
    let args = arguments;//args 是用户函数的参数列表

    timer = setTimeout(function () {
      func.apply(self, args);//执行用户函数
      timer = null;//重置定时器
    }, wait)
  }
}
//节流
//func是用户传入需要防抖的函数
//wait是等待时间
function throttle(func, wait=50) {
  let lastTime = 0;//上一次执行该函数的时间
  let timer = null;

  return function () {
    //如果存在定时器要先清除
    if (timer) {
      clearInterval(timer);
      timer = null;
    }

    let self = this;
    let args = arguments;
    let nowTime = +new Date();

    //剩余等待时间
    const remainWaitTime = wait - (nowTime - lastTime);

    if (remainWaitTime <= 0) {
      lastTime = nowTime;
      //apply() 是 JavaScript 函数的一个方法,它用于调用函数并设置函数内部 this 关键字的指向。
      func.apply(self, args);
    } else {
      //继续等待remainWaitTime再执行
      timer = setTimeout(function () {
        lastTime = +new Date();
        func.apply(self, args);
        timer = null;//重置定时器
      }, remainWaitTime)
    }
  }
}
相关推荐
用户47949283569151 小时前
从 58MB 到 2.6MB:我是如何将 React 官网性能提升 95% 的
前端·javascript
该用户已不存在1 小时前
7个让全栈开发效率起飞的 Bun 工作流
前端·javascript·后端
芙蓉王真的好12 小时前
Angular CDK 响应式工具指南:从基础到自适应布局应用
前端·javascript·angular.js
明仔的阳光午后3 小时前
React 入门 01:快速写一个React的HelloWorld项目
前端·javascript·react.js·前端框架·reactjs·react
橙某人4 小时前
Vue3 + Pinia 移动端Web应用:页面缓存策略解决方案💡
前端·javascript·vue.js
San305 小时前
使用 OpenAI API 生成文本与图片:从环境搭建到提示工程完全解析
javascript·人工智能·node.js
TimelessHaze5 小时前
🚀 一文吃透 React 性能优化三剑客:useCallback、useMemo 与 React.memo
前端·javascript·react.js
先树立一个小目标5 小时前
puppeteer生成PDF实践
前端·javascript·pdf
冲刺逆向5 小时前
【js逆向案例二】瑞数6 深圳大学某医院
前端·javascript·vue.js
2401_837088505 小时前
Error:Failed to load resource: the server responded with a status of 401 ()
开发语言·前端·javascript