防抖与节流-由于抖动对系统性能消耗比较大.所以需要用这两种解决方式

1.防抖

特点:

1.当持续触发事件时,不执行逻辑代码
2.当触发停止时,可以通过设置时间再执行代码
+原生+

//定义一个定时器变量
let  timer =null,
windou.onscroll=function(){
//每次进来之前,将定时器清除掉
clearTimeout(timer)
timer=setTimeout(()=>{
console.log("11111111")
})
}

封装的函数

//方法:防抖
function fangdou(time,callback){
//定义一个定时器
let timer=nill
return function(()=>{
//每次进来之前,将定时器清除
timer=setTimeout(()=>{
callback()
},time);
})
}

//给窗口添加滚动事件
window.onscroll=fangdou(1000,(=>{
log{'111111111111'}
}))

2.节流.

特点：

1. 当持续触发事件时，每隔固定时间也会执行一次逻辑代码
2. 当触发停止时，过一段时间再执行逻辑代码

代码：

• 原生：

  // 创建一个开始时间
    var beginTime = Date.now()
    // 定义一个定时器
    var timer = null
    // 给窗口添加滚动事件
    window.onscroll = function () { // 1000 次（连续执行的）
        // 清除定时器
        clearTimeout(timer)
        // 得到当前时间
        var currentTime = Date.now()
        // 得到一个时间间隔
        var space = currentTime - beginTime
        // 如果时间间隔大于 1000 ,就执行逻辑
        if (space > 1000) {
            console.log('onscroll')
            // 由于上一次已经执行完成，开始时间应该变为现在的时间
            beginTime = Date.now()
        } else {
            timer = setTimeout(() => {
                console.log('onscroll')
            }, 1000);
        }
    }

节流函数

// 节流的方法
    function jieliu(time, cb) {
        var timer = null
        var beginTime = Date.now()
        return function () {
            clearTimeout(timer)
            if (Date.now() - beginTime > time) {
                cb()
                beginTime = Date.now()
            } else {
                timer = setTimeout(() => {
                    cb()
                }, time);
            }
        }
    }