节流与防抖（小白版本）

话很少说, 直接上代码

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);
  }
复制代码