函数防抖、节流

前言


在进行窗口的resize、scroll、输入框内容等校验操作时,如果事件处理函数的调用频率太高,会加重浏览器的负担,使用户体验变差。此时可采用防抖函数(debounce)、

和节流函数(throttle)的方式来减少调用频率且不影响效果。


防抖函数

function debounce (fn,wait) {
  var timeout = null;
  return function () {
    if (timeout !== null) {
      clearTimeout(timeout);
    }
    timeout = setTimeout(fn,wait);
  }
}

function handle () {
  console.log(Math.random());
}
window.addEventListener('scroll',debounce(handle,100))

在浏览器控制台输入即可看到效果


上一篇:vue-搜索功能-实时监听搜索框的输入,N毫秒请求一次数据


下一篇:JS的节流、函数防抖 原理及使用场景