节流:规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。
场景:鼠标不断点击触发,如抢优惠券
function throttle (handle, wait) {
var lastTime = 0;
return function () {
var nowTime = new Date().getTime();
if(nowTime - lastTime > wait){
handle.apply(this, arguments);
lastTime = nowTime;
}
}
}
防抖:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。
场景:search搜索联想,用户在不断输入值时,用防抖来节约请求资源
function debounce (handle, delay) {
var timer = null;
return function () {
clearTimeout(timer);
timer = setTimeout(() => {
handle.apply(this, arguments);
}, delay);
}
}