JavaScript中的防抖和节流

防抖(debounce)

触发高频事件后 n秒内 函数只执行一次
如果n秒内高频事件再次触发，则重新计算事件

防抖场景：

1.登录、发短信等按钮避免用户点击太快，以至于发送多次请求，需要防抖
2.调整浏览器窗口大小时，resize次数过于频繁，造成计算过多，此时需要一次到位，就需要防抖
3.文本编辑器实时保存，当无任何更改操作一秒后进行保存

防抖代码：

function debounce(func, wait) {
    let timeout; 
    return function () {
        if (timeout) clearTimeout(timeout)
        timeout = setTimeout(() => {
            // apply可以改变函数作用域
            func.apply(this, arguments)
        }, wait);
    }
}

防抖代码：添加是否立即执行功能

function debounce(func, wait, immediate) {
    let timeout;
    return function () {
        if (timeout) clearTimeout(timeout)
        if (immediate) { //判断是否立即执行
            var callNow = !timeout;
            timeout = setTimeout(() => {
                timeout = null
            }, wait);
            if(callNow) func.apply(this,arguments)
        } else {
            timeout = setTimeout(() => {
                console.log(this) 
                // apply可以改变函数作用域
                func.apply(this, arguments)
            }, wait);
        }   
        
    }
}

防抖方法的使用
在input框中输入文字 和 点击提交触发事件 使用num模拟请求次数

//html结构
 <div>
      <input type="text" id="search" /> 
      <button id="btn">提交</button>
      <div id="content"style="background:pink;padding:60px;text-align:center;font-size:40px">0</div> 
 </div>

//js调用防抖方法
 let num = 1
 let search = document.getElementById("search")
 let content = document.getElementById("content")
 function count() {
 //模拟请求
   content.innerHTML = num++
 }
 search.onkeyup = debounce(count,1000)
 btn.onclick = debounce(count,1000,true)

节流(throttle)

高频事件触发 但 ** n秒内 函数只执行一次 **
所以节流会稀释函数的执行频率
比如：1s内发生一次，一分钟发生一次

节流场景：

1.scroll事件，每隔一秒计算一次位置信息等
2.浏览器播放事件，每隔一秒计算一次进度信息等
3.input实时搜索并发送请求展示下拉列表，每隔一秒发送一次请求（也可做防抖）

节流代码（实现方式一）：

// 节流函数
function throttle(func, wait) {
    let timeout; 
    return function () {
        //创建定时任务
       if (!timeout) {
        // 没有则创建
            timeout = setTimeout(()=>{
                timeout = null
                func.apply(this,arguments)
            },wait)
       } else {
        //console.log('已存在定时任务')
       }
    }
}

节流代码（实现方式二）：使用时间戳计算

//时间戳
function throttle2(func, wait) {
   let previous = 0;
   return function () {
    // 获取当前时间
    let noe = Date.now();
    if (now - previous > wait) {
        // 超过等待时间执行函数
        func.apply();
        // 记录上次时间
        previous = now
    }
   }
}