js性能优化之防抖、节流

js是前端开发中最常用的脚本语言之一，优化它的性能可以有效地提升页面响应速度和流畅度。下面介绍一些常见的JavaScript性能优化的两个函数：

1.防抖函数

防抖函数是指短时间大量触发同一事件，只执行一次函数，实现延迟执行，防抖的应用场景很多：

• 输入框中频繁的输入内容，搜索或提交信息；
• 频繁的点击按钮，触发某个事件，如下载；
• 监听浏览器滚动事件，完成指定操作；
• 用户缩放浏览器的resize事件

/**
 * @description: 防抖函数
 * @Author: ouchulun
 * @Date: 2023-03-15 16:19:11
 * @return {Function} 包装后的执行函数 
 * @param {Function} fn 执行函数
 * @param {Number} wait 等待时间
 * @param {Boolean} immediate 首次是否立刻执行
 */
function debounce(fn, wait, immediate) {
    let timer = null
    let firstRun = false
    return function () {
        const context = this
        const args = arguments
        if (!firstRun && immediate) {
            fn.apply(context, args)
            firstRun = true
        } else {
            timer && clearTimeout(timer)
            timer = setTimeout(() => {
                fn.apply(context, args)
                clearTimeout(timer)
                timer = null
            }, wait)
        }
    }
}

2.节流函数

节流函数即一个时间间隔内多次触发只执行一次，以固定的频率去触发需要执行的函数。节流的应用场景：

• 监听页面的滚动事件；
• 鼠标的移动事件；
• 用户频繁点击按钮操作；
• 游戏中的一些设计，如技能冷却；

/**
 * @description: 节流函数
 * @Author: ouchulun
 * @Date: 2023-03-15 16:19:11
 * @return {Function} 包装后的执行函数 
 * @param {Function} fn 执行函数
 * @param {Number} wait 等待时间
 * @param {Boolean} isTrailing 是否在节流后执行
 */
function throttle(fn, wait, isTrailing) {
    let timer = null
    return function () {
        const context = this, args = arguments
        if (!timer) {
            !isTrailing && fn.apply(context, args)
            timer = setTimeout(()=>{
                isTrailing && fn.apply(context, args)
                timer && clearTimeout(timer)
                timer = null
            }, wait)
        }
    }
}