防抖和节流

防抖

事件触发后n秒内只执行一次，如果n秒内再次触发，重新计时
html:

<input id="input" type="text"/>
<div style="height: 1000px;"></div>

• 非立即触发

let inputCon = document.getElementById('input');
function inputRes() {
  console.log(inputCon.value)
}
function handle() {
  console.log(window.scrollY)
}
function debounce(fn, deplay) {
  let timer = null
  return function() {
    if (timer) clearTimeout(timer);
      timer = setTimeout(() => {
      fn.apply(this, arguments)
    }, deplay);
  }
}
inputCon.addEventListener("input", throttle(inputRes,1000));
window.addEventListener('scroll', debounce(handle,500));

事件触发n秒后，函数才会执行，如果在事件的n秒内，再次滚动，就会重新计算时间。

• 立即触发

let inputCon = document.getElementById('input');
function inputRes() {
  console.log(inputCon.value)
}
function handle() {
  console.log(window.scrollY)
}
function debounce(fn, deplay) {
  let timer = null
  return function() {
    if (timer) {
      clearTimeout(timer);
    } else {
      fn.apply(context, args)
    }
    timer = setTimeout(() => {
      timer = null
    }, deplay);
  }
}
inputCon.addEventListener("input", throttle(inputRes,1000));
window.addEventListener('scroll', debounce(handle,500));

事件触发后函数立即执行，在n秒内不继续触发该事件才会再执行函数。

节流

n秒内只触发一次

• 时间戳实现

let inputCon = document.getElementById('input');
function inputRes() {
  console.log(inputCon.value)
}
function handle() {
  console.log(window.scrollY)
}
function throttle(fn, deplay) {
  let old = 0;
  return function() {
    let now = new Date();
    if (now - old > deplay) {
      fn.apply(this, arguments)
      old = now;
    }
  }
}
inputCon.addEventListener("input", throttle(inputRes,1000));
window.addEventListener('scroll', throttle(handle,500));

触发事件，函数立即执行，每隔n秒执行一次。

• 定时器实现

let inputCon = document.getElementById('input');
function inputRes() {
  console.log(inputCon.value)
}
function handle() {
  console.log(window.scrollY)
}
function throttle(fn, deplay) {
  let timer = null
  return function() {
    if (timer) return; // 注意是return
      timer = setTimeout(() => {
        timer = null
        fn.apply(this, arguments)
    }, deplay);
  }
}
inputCon.addEventListener("input", throttle(inputRes,1000));
window.addEventListener('scroll', throttle(handle,500));

触发事件，触发时间段结束后执行函数，每隔n秒执行一次。

开发适用场景

1.输入框输入完成后搜索，建议使用非立即执行防抖，等待输入完成后，再去搜索。
2.按钮提交，建议非立即执行防抖，只提交最后一次。
（...待补充）