[JavaScript知识库] 有趣且重要的JS知识合集（11）防抖节流函数

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 有趣且重要的JS知识合集（11）防抖节流函数 -> 正文阅读

[JavaScript知识库]有趣且重要的JS知识合集（11）防抖节流函数

/**
 * 防抖函数（常用于input框搜索情况）
 * @param {*} func 
 * @param {*} delay 
 * @param {*} immediate 
 * @returns 
 */
export function debounce(func, delay, immediate = true) {
  let timer = null
  return function(args) {
    let _this = this
    if (timer) clearTimeout(timer)
    if (immediate) {
      let now = !timer
      timer = setTimeout(() => {
        timer = null
      }, delay)
      now && func.call(_this, args)
    } else {
      timer = setTimeout(() => {
        func.call(_this, args)
      }, delay)
    }
  }
}

/**
 * 节流函数（常用于onresize, onmouseover情况）
 * @param {*} func 
 * @param {*} delay 
 * @param {*} immediate 
 * @returns 
 */
export function throttle(func, delay, immediate = true) {
  let timer
  return function(args) {
    let _this = this
    if (immediate) {
      let now = Date.now()
      let prev = 0
      if (now - prev > delay) {
        func.call(_this, args)
        prev = now
      }
    } else {
      if (!timer) {
        timer = setTimeout(() => {
          timer = null
          func.call(_this, args)
        }, delay)
      }
    }
  }
}