手写防抖/节流函数

最新推荐文章于 2024-04-06 20:27:56 发布

律政先锋

最新推荐文章于 2024-04-06 20:27:56 发布

阅读量253

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_39400507/article/details/124810293

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了JavaScript中的函数防抖和节流技术，包括它们的定义、应用场景和实现方式。函数防抖能确保在特定时间内只执行一次，而节流则限制了执行频率，两者常用于优化性能，例如滚动事件、窗口resize等高频触发的场景。文中提供了具体的函数实现代码，便于理解和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

防抖

触发事件之后，在n秒内函数只能执行一次，如果在n秒内又触发了函数，则会重新计算函数执行事件

/**
 * @desc 函数防抖
 * @param fn 函数
 * @param wait 延迟执行毫秒数
 * @param immediate true 表立即执行，false 表非立即执行
 */
const debounce = function (fn, wait, immediate = false) {
  let timer = null
  return function () {
    let context = this
    let args = arguments
    if (timer) {
      clearTimeout(timer)
   }
    if (immediate) {
      // 立即执行版本
      let callNow = !timer
      if (callNow) {
        fn.apply(context, args)
     }
      timer = setTimeout(() => {
        timer = null
     }, wait)
   } else {
      timer = setTimeout(() => {
        fn.apply(context, args)
     }, wait)
   }
 }
}

节流

连续触发事件但是在 n 秒中只执行一次函数。

/**
 * @desc 函数节流
 * @param fn 函数
 * @param wait 延迟执行毫秒数
 * @param type 1 表时间戳版，2 表定时器版
 */
const throttle = function (fn, wait, type) {
  if (type === 1) {
    let preTime = 0
    return function () {
      let context = this
      let args = arguments
      let nowTime = new Date()
      if (nowTime - preTime > wait) {
        preTime = nowTime
        fn.apply(context, args)
     }
   }
 } else {
    let timer = null
    return function () {
      let context = this
      let args = arguments
      if (!timer) {
        // 当延迟时间结束后，执行函数
        timer = setTimeout(() => {
          timer = null
          fn.apply(context, args)
       }, wait)
     }
   }
 }
}