什么事防抖和节流,有什么区别,如何实现

防抖和节流,本质上是优化高频率执行代码的一种手段,比如:resize、scroll、keypress、mousemove这些事件在触发的时候,会不断调用绑定在事件上的回调函数,这样极大浪费资源,降低前端性能。

为了优化体验,需要对这类事件进行调用次数的限制,所以我们采取了防抖和节流的手段来减少调用频率。

节流:在n秒内重复发生的事件,只有一次是生效的

防抖:在n秒后再执行该事件。

节流

完成节流可以使用时间戳与定时器的写法,使用时间戳的写法,事件会立即执行,停止触发后没有办法再次执行:

javascript 复制代码
function throttled1(fn, delay = 500) {
  let oldtime = Date.now()
  return function (...args) {
    let newtime = Date.now()
    if (newtime - oldtime >= delay) {
      fn.apply(null, args)
      oldtime = Date.now()
    }
  }
}

使用定时器的写法,delay毫秒后第一次执行:

javascript 复制代码
function throttled2(fn, delay = 500) {
  let timer = null
  return function (...args) {
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, args)
        timer = null
      }, delay);
    }
  }
}

两种写法的结合后:

javascript 复制代码
function throttled(fn, delay) {
  let timer = null
  let starttime = Date.now()
  return function () {
    let curTime = Date.now() // 
    let remaining = delay - (curTime - starttime) // 
    let context = this
    let args = arguments
    clearTimeout(timer)
    if (remaining <= 0) {
      fn.apply(context, args)
      starttime = Date.now()
    } else {
      timer = setTimeout(fn, remaining);
    }
  }
}

防抖

简单的封装:

javascript 复制代码
function debounce(func, wait) {
  let timeout;
  return function () {
    let context = this; // this
    let args = arguments; // event
    clearTimeout(timeout)
    timeout = setTimeout(function () {
      func.apply(context, args)
    }, wait);
  }
}

防抖和节流的相同点:

  • 都可以使用setTimeout实现
  • 目的都是降低回调函数的执行频率,节省计算资源

不同的是:

  • 函数防抖,在连续操作结束后,处理回调,利用clearTimeout和setTimeout实现;函数节流是在一段时间只执行一次,
  • 防抖关注的是一段时间内频繁触发的事件,只在最后执行一次;节流值关注的事一段时间内执行一次。

应用场景

防抖的使用场景有:

  • 搜索框输入,只需要用户最后一次输入完,再做处理
  • 手机号、邮箱验证输入检测
  • 窗口大小resize,只需窗口调整完成后,计算窗口的大小,防止重复渲染

节流的应用场景有:

  • 滚动加载,加载更多或者滚动到底部监听
  • 搜索框,搜索关联功能
相关推荐
gnip31 分钟前
markdown预览自定义扩展实现
前端·javascript
G等你下课1 小时前
AJAX请求跨域问题
前端·javascript·http
爱编程的喵1 小时前
JavaScript闭包深度解析:从作用域到实战应用
前端·javascript
ITfeib1 小时前
Flutter
开发语言·javascript·flutter
雪碧聊技术2 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
打不着的大喇叭3 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
Sun_light3 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子3 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
百锦再3 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
优雅永不过时_v3 小时前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript