防抖和节流

浏览器的resize，scroll，输入框内容校验、远程搜索，按钮点击等交互操作，如果这些操作对应的处理函数比较复杂（服务器请求、浏览器重渲染）时，事件触发的频率又无限制，会加重浏览器的负担，导致用户体验非常糟糕，防抖和节流是用来减轻浏览器的负担的，减少出发频率，同时又不影响效果的呈现。

• 防抖

减少事件触发的频率，控制函数在一定时间内的执行次数。防抖意味着N秒内函数只会被执行一次，如果N秒内再次被触发，则重新计算延迟时间；

一般用于如下事件：

1. 输入框的校验
2. 浏览器缩放resize
3. 按钮提交

防抖函数：

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秒内只会执行一次，节流会稀释函数的执行频率，按设定的时间频率执行，

   一般用于如下事件：

1. 按钮点击
2. scroll
3. 拖曳事件

节流函数：

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)
)