防抖、节流

1. 防抖

• n秒后执行函数，如果n秒内重复触发，则重新计时。

应用场景

• 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖

• 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖

• 文本编辑器实时保存，当无任何更改操作n秒后进行保存

  // 防抖函数-简易版
  
  function debounce (fn, delay) {
  
  let timeout;
  return function () { if (timeout) clearTimeout(timeout); 
  timeout = setTimeout(function () { fn(); }, delay); } }
  
  // 防抖函数 function debounce (fn, delay) { 
  let timeout; 
  return function () { 
  if (timeout) 
  clearTimeout(timeout); 
  timeout = setTimeout(() => { fn.apply(null, arguments); }, delay); } }
  
  // 立即执行防抖函数
  
  function debounce (fn, delay) {
  
  let timeout;
  return function () { if (timeout) clearTimeout(timeout);
   let callNow = !timeout; timeout = setTimeout(() => { timeout = null; }, delay); 
  if (callNow) fn.apply(null, arguments); } }

  // 立即执行防抖函数+普通防抖
  
  function debounce (fn, delay, immediate) {
  
  let timeout;
  return function () { if (timeout) clearTimeout(timeout);
  
  if (immediate) {
      let callNow = !timeout;
  	timeout = setTimeout(() => {
          timeout = null;
      }, delay);
      if (callNow) fn.apply(null, arguments);
  } else {
      timeout = setTimeout(() => {
          fn.apply(null, arguments);
      }, delay);
  }
  } }

2 . 节流

• n秒内只运行一次，若在n秒内重复触发，只有一次生效。

应用场景：

• scroll 事件，每隔一秒计算一次位置信息等

• 浏览器播放事件，每个一秒计算一次进度信息等

• input 框实时搜索并发送请求展示下拉列表，每隔一秒发送一次请求 (也可做防抖)

  // 节流 --- 定时器版本 - 简易版
  
  function throttle (fn, wait) {
  
  let timer;
  return function () { if (!timer) { timer = setTimeout(function () { 
  timer = null; fn(); }, wait) } } }
  
  // 节流 --- 定时器版本
  
  function throttle (fn, wait) {
  
  let timer;
  return function () { if (!timer) { timer = setTimeout(() => { 
  timer = null; fn.apply(null, arguments); }, wait) } } }
  
  // 节流 --- 时间戳版本 （当前时间 - 上一次执行的时间 > 间隔时间）
  
  function throttle2 (fn, wait) {
  
  let previous = 0;
  return function () { let now = new Date(); if (now - previous > wait) { 
  fn.apply(null, arguments); previous = now; } } }