巧用节流和防抖，轻松实现适配网页优化

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情

前言

作为老生常谈的页面性能优化策略，节流和防抖对于我们开发来并不陌生，在处理函数触发频繁，浏览器性能损耗方面，节流和防抖无出其右。这篇文章将简要解析下节流和防抖的具体含义，应用场景以及实现方式

含义:

节流和防抖都是网页性能优化策略，用于处理回调函数触发频率过高的问题

节流（throttle）:使函数在一段时间内只运行一次动作，若在一段时间内重复触发，只有一次生效。节约流量

防抖（debounce）：当事件被触发时，延迟n秒后再执行回调，如果在这n秒内事件又被触发，则重新开始计时。防止抖动

应用场景:

节流（throttle）应用于多次执行变成每隔一段时间就执行一次函数：

1. 在某个时间段内多次点击，但不能触发多次点击事件，只能触发一次
2. 监听滚动事件（scroll），反复滚动到某个位置时，触发一次而不是多次
3. 执行拖拽动作时，在规定时间内只执行一次
4. 调整窗口时

节流和防抖的实现都需要定时器的参与

代码实现:

function throttle (a,time){
    let timer = null
    return()=>{
        if (timer){return}
        timer = setTimeout(() => {
            a.apply(this,arguments)
            timer = null
        }, time)    
    }
}

防抖（debounce）主要应用于多次执行需要变更为一次执行函数时:

1.点击登录、发短信等按钮时，为避免用户点击频率太快，发送了多次请求，需要防抖功能 2.调整浏览器窗口大小时，resize 次数会请求过于频繁，造成计算量过多，此时需要只执行最后一次，就用到了防抖 3.input 输入框实现搜索功能时

代码实现:

function debounce(a,time){
    let timer = null
    return()=>{
        if(timer){
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            a.apply(this,arguments)
            timer = null
        }, time)
    }
}

谁终将声震人间，必长久深自缄默；谁终将点燃闪电，必长久如云漂泊。——尼采

秋意更浓了，天气更冷了，小伙伴们记得多穿件衣服呀😁😁