js防抖与节流
防抖与节流的概念
都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。
区别
防抖 任务频繁触发的情况下,只有任务触发的间隔超过指定间隔的时候,任务才会执行,它们可以减少不必要的函数调用次数。
节流 指定时间间隔内只会执行一次任务。换句话说,无论函数被触发多少次,它都只会按照预定的间隔执行。
注意
使用节流或者防抖要用到工厂函数(返回新函数的函数),onclick不会触发返回的方法,addEventListener可以正常触发,所以我们要使用addEventListener监听某个按钮来使用。
防抖
<button type="button" id="btn">防抖</button>
<script>
/**
* 任务频繁触发的情况下,只有任务触发的间隔超过指定间隔的时候,任务才会执行;在连续不断的点击时,只会触发一次submitData方法,除非间隔一秒后再次点击,可再次触发submitData方法
* */
let btn = document.getElementById('btn');
btn.addEventListener('click', debounce(submitData, 1000))
/**防抖 */
function debounce(fn,time){
let t = null;
return function (){
if (t){
clearTimeout(t)
}
let f = !t;
if (f){
fn();
}
t = setTimeout(()=>{
t = null;
}, time)
}
}
/**提交数据 */
function submitData(){
console.log('提交数据')
}
</script>
节流
<button type="button" id="throttle">节流</button>
<script>
/**
* 指定时间间隔内只会执行一次任务, 在连续不断的点击时,在500毫秒内只调用一次getData方法
* */
let throttle = document.getElementById('throttle');
throttle.addEventListener('click', throttleFunc(getData, 500))
/**节流 */
function throttleFunc(fn, delay){
let begin = 0;
return function(){
let curTime = new Date().getTime();
if (curTime - begin > delay){
fn();
begin = curTime
}
}
}
function getData(){
console.log('获取数据')
}
</script>