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
    }
   }
}

你可能感兴趣的:(js,javascript,前端,开发语言)