throttle and debounce sample and test code

debounce.js

// 適用場景：偵測 input 做搜尋或自動完成
// inputEl.addEventListener('keyup', debounce(func, 500));
function debounce(func, delay = 200) {
  let timer = null;
  
  return (...args) => {
    if (timer) clearTimeout(timer); 
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  }
}

test-sample.js

let a = function(name) { 
  console.log('hello ' + name); 
}
let b = debounce(a.bind(this, 'debounce'), 2000);
let c = throttle(a.bind(this, 'throttle'), 2000);

b();
c();
b(); // do not execute
c(); // do not execute
setTimeout(()=>{
  b(); c();
},2100)

throttle.js

// 適用場景：畫面resize or scroll偵測
// window.addEventListener('resize', throttle(func, 500));
function throttle(func, delay = 200) {
  let timer = null, inTrottle = false;
  
  return (...args) => {
    if (inTrottle) return;
    inTrottle = true;
    clearTimeout(timer);
    // if func need execute early, remember to remove func.apply in the setTimeout
    // let args = arguments;
    // func.apply(this, args);
    timer = setTimeout(() => {
      func.apply(this, args); // if func need execute early, remote this line
      inTrottle = false;
    }, delay)
  }
}