防抖和节流

防抖和节流

防抖和节流是什么？

防抖：
让函数在停止触发事件的一段时间再执行
节流：
让函数在一定的时间频率执行，也就是以固定的频率触发

为什么要防抖和节流？

有时候我们给按钮或鼠标的移动添加相应的事件 ，如果不需要实时响应，那就可以通过防抖和节流来优化页面性能
html

<button>加一</button>
    <span></span>

js

var text = 0
var button= document.querySelector('button')
var span = document.querySelector('span')
span.innerHTML = text
button.onclick = ()=>{
    text ++
    span.innerHTML = text
}

效果

防抖

原理：让函数延时执行，如果在上一个函数还没执行完，又触发了该事件，那么就会清除上一个事件，将上一个事件的延时器取消不执行
html

<button id="b2">防抖加一</button>
<span id="s2"></span>

js

var text2 = 0
var button2= document.querySelector('#b2')
var span2 = document.querySelector('#s2')
var timeout1
span2.innerHTML = text2
button2.onclick = ()=>{
    clearTimeout(timeout1)
    timeout1 = setTimeout(function(){
        text2 ++
            span2.innerHTML = text2
    },500)
}

结果

也就是不管重复触发多少次事件，该事件也只会执行一次，只有当上一次的函数执行完再触发事件，事件才会执行

节流

原理：在固定时间内，节流函数只会触发一次
html

<button id="b3">节流加一</button>
<span id="s3"></span>

js

var text3 = 0
var button3= document.querySelector('#b3')
var span3 = document.querySelector('#s3')
var timeout2
var flag = true
span3.innerHTML = text3
button3.onclick = ()=>{
    if(!flag){
        return false
    }  
    flag = false      
    timeout2 = setTimeout(function(){
        span3.innerHTML = ++text3
        flag = true
    },500)
}

结果

总结

相同点：

• 节流和防抖都是为了防止某一时间的频繁触发，但是他们两个的原理是不一样的

区别：

• 防抖是一段时间只能执行一次，节流是间隔时间执行