浏览器的resize,scroll,输入框内容校验、远程搜索,按钮点击等交互操作,如果这些操作对应的处理函数比较复杂(服务器请求、浏览器重渲染)时,事件触发的频率又无限制,会加重浏览器的负担,导致用户体验非常糟糕,防抖和节流是用来减轻浏览器的负担的,减少出发频率,同时又不影响效果的呈现。
- 防抖
减少事件触发的频率,控制函数在一定时间内的执行次数。防抖意味着N秒内函数只会被执行一次,如果N秒内再次被触发,则重新计算延迟时间;
一般用于如下事件:
- 输入框的校验
- 浏览器缩放resize
- 按钮提交
防抖函数:
function debounce(fn,wait,immediate) {
let timeout;
var debounced = function () {
if(timeout){
clearTimeout(timeout)
}
timeout = setTimeout(function (args) {
fn();
},wait);
if(immediate){
fn();
}
}
return debounced;
}
使用实例:
var elInput = document.getElementById('inpt');
var btn = document.getElementById('btn')
elInput.addEventListener('input',
debounce(function () {
console.log(33)
el.innerHTML = elInput.value;
},1000,false)
);
- 节流
同样也是用来高频事件触发,在n秒内只会执行一次,节流会稀释函数的执行频率,按设定的时间频率执行,
一般用于如下事件:
- 按钮点击
- scroll
- 拖曳事件
节流函数:
function throtte(fn,delay) {
let timeout;
let startTime = Date.now()
var throtted = function () {
let now = Date.now();
console.log(startTime,now,now-startTime)
clearTimeout(timeout)
if(now-startTime>delay){
fn();
startTime = Date.now();
}else{
timeout = setTimeout(fn,1000)
}
}
return throtted;
}
使用实例:
btn.addEventListener('click',throtte(function () {
console.log('submit');
console.log(elInput.value)
},2000)
)