
防抖与节流可谓是面试常见,其实很好理解,下面带你分分钟了解防抖与节流的基本思想与写法。
一、速识防抖:
在这之前,比如我们先定义一个按钮,并绑定一个点击事件,执行要触发的事件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!-- 定义一个按钮 -->
<input type= "button" id= "btn" value= "按钮" />
<script>
var btn = document.getElementById( "btn" );
btn.addEventListener( "click" , real);
function real(e) {
console.log( "北极光之夜。" );
console.log(e);
}
</script>
|
可以发现,一直点击会一直触发事件,如果这个事件为发送一个请求,那么这对与服务器来说是很不友好的。同样的请求因为用户的多次点击而多次发送请求,返回的结果和只点击一次是一样的,大大加重服务器压力和影响性能。所以,我们引入防抖的概念,简单来说,防抖就是通过setTimeout 的方式,在一定的时间间隔内,将多次触发变成一次触发。
二、速识节流:
节流其实就很好理解了,减少一段时间的触发频率。简单来说,就是你一直狂点不停的话,它会每隔一定时间就执行一次。它与防抖区别就是,无论事件触发多么频繁,都可以保证在规定时间内可以执行一次执行函数。下面利用计算时间戳实现:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <input type= "button" id= "btn" value= "按钮" />
<script>
var btn = document.getElementById( "btn" );
btn.addEventListener( "click" , trigger(real, 500));
function trigger(fn, delay) {
var bef = 0;
return function () {
var now = new Date().getTime();
if (now - bef > delay) {
fn(...arguments);
bef = now;
}
};
}
function real(e) {
console.log( "北极光之夜。" );
console.log(e);
}
</script>
|
以上就是JS防抖与节流的介绍,希望对大家有所帮助。更多js学习指路:js教程