節流與防抖（小白版本）

話很少說, 直接上代碼

1. 函數節流

<input type="text" id='input' >
複製代碼

// 函數節流
  function throttle(delay, fn) {
    if(!start) {
      start = Date.now();
    }
    var current = Date.now();
    if(current - start > delay) {
      fn();
      start = 0;
    }
  }
  function ajax() {
    console.log('出發了');
  }
  var start = 0;
  var end = new Date();
  document.getElementById('input').addEventListener('input', function () {
    throttle(1000, ajax);
  })
複製代碼

只有當輸入間隔大於1000時, 纔會觸發ajax函數, 避免重複觸發ajax請求, 消耗服務器性能

2. 函數防抖

防抖:<input type="text" id='ipt'>
  <ul class='show'></ul>
複製代碼

//函數防抖
  var oUl = document.getElementsByClassName('show')[0];
  var ipt = document.getElementById('ipt');
  var timer = null;
  function debounce(delay, fn) {
    clearTimeout(timer);
    timer = null;
    timer = setTimeout(fn, delay); // fn爲須要作的事情
  }
  function showMsg() {
    var oLi = document.createElement('li');
    oLi.innerText = ipt.value;
    oUl.appendChild(oLi);
  }
  ipt.onkeyup = function () {
    debounce(1000, showMsg);
  }
複製代碼