防抖和节流

Question

防抖

最基础版本

function debounce(fn, wait) {
  let timer;
  return function () {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, wait);
  };
}

立即触发和取消

function debouncePro(fn, wait, immediate = false) {
  let timer;

  function _debounce() {
    if (immediate && !timer) {
      fn.apply(this, arguments);
      timer = setTimeout(() => {
        timer = null;
      }, wait);
      return;
    }

      clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(this, arguments);
        timer = null;
      }, wait);
    
  }
  _debounce.cancel = function () {
    clearTimeout(timer);
    timer = null;
  };

  return _debounce;
}

// test
const timer = (wait) => new Promise((resolve) => setTimeout(resolve, wait));

const fn = debouncePro(() => console.log(111), 1000, true);

async function main() {
  fn();
  console.log('第1次');
  await timer(1000)
  fn();
  console.log('第2次');
  await timer(400)
  fn();
  fn();
  console.log('第3次延后触发');

}

main();

节流

function throttle(fn, wait) {
    let timer 
    return function() {
        if(timer) {
            return 
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments)
            timer = null
        }, wait);
    }
}
const timer = (wait) => new Promise((resolve) => setTimeout(resolve, wait));

const log = throttle(console.log.bind(console),1000)



async function main() {
    log(11);
  await timer(1000)
  log(222);
  await timer(400)
  log(222);

}
main()