防抖与节流

1.防抖
高频率事件在 n 秒内只触发一次，如果再次被触发，则重新计时
方案
设置定时器，当 n 秒内再次被触发，则清除定时器。

<button id="btn">提交</button>
<script >
document.getElementById('btn').addEventListener('click', submit)
function submit(){
    console.log('请求数据')
}
</script>

上面是最简单的提交按钮，现在的需求是点击按钮，请求后台的数据。
如果按照上面的代码，可以实现，但是如果用户连续点击，就在造成资源浪费。这里就用到了防抖。

document.getElementById('btn').addEventListener('click', debounce)
let timer = null
function debounce(){
    clearTimeout(timer)
    timer = setTimeout(function() {
        submit()
    }, 1000)
}

function submit(){
    console.log('请求数据')
}

2节流
高频率事件在 n 秒内只触发一次，n 秒内不再触发。
方案
还是基于上面的例子

document.getElementById('btn').addEventListener('click', throttle)

let flag = true
function throttle(){
    if (!flag) return
    flag = false
    setTimeout(function(){
        submit()
        flag = true
    },1000)
}
function submit(){
    console.log('请求数据')
}

上面定义了一个标记 flag 表示当前函数执行状态，如果以及过了 1 秒，请求数据执行后，我们将 flag 设置成 true，
说明函数可重新执行，否则就直接返回，不执行 setTimeout。