throttle
throttle从触发第一次开始到你设置的delay这个时间段内只触发一次(在delay最后一刻触发),可以简单粗暴地理解为防止重复点击的回调可控版(通过设置delay来控制)
简单实现:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22<div id="container"></div>
<script>
var throttle = function (fn, delay) {
var timer = null;
return function () {
var context = this, args = arguments;
if (timer) {
return;
}
timer = setTimeout(function () {
fn.apply(context, args);
timer = null;
}, delay);
}
};
document.querySelector("#container").addEventListener('mousemove', throttle(
function () {
console.log('shinelp100')
}
, 1000), false);
</script>
debounce
debounce 高频次的触发某个事件或是方法时,只要触发的频率小于设定的delay是就会触发对应的事件或方法;简单粗暴的理解就是当你的触发事件或是方法频率小于delay时就会触发
简单实现:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<script>
var debounce = function(fn, delay){
var timer = null;
return function(){
var context = this, args = arguments;
clearTimeout(timer);
timer = setTimeout(function(){
console.log(args);
fn.apply(context, args);
}, delay);
};
};
window.onresize = debounce(myFunc, 1000,'shinelp100');
function myFunc(name){
console.log(name);
}
</script>
总结:throttle相当于在第一次触发(事件或是方法)时在堆栈中添加一个异步执行的方法、等待delay秒去执行这个异步的方法,期间不接受任何一次相同的事件和方法。
debounce相当于在第一次触发(事件或是方法)时在堆栈中添加一个异步执行的方法、等待delay秒去执行这个异步的方法,期间接受任何一次相同的事件和方法来重置上次的等待,直至等到delay秒后触发(事件或方法)