js debounce & throttle All In One

js debounce & throttle All In One

debounce & throttle

js 节流 防抖

debounce 防抖

防抖，是指一个事件触发后在单位时间内，如果发生重复触发了同一事件，则取消上一次的事件，并重新计时️

应用场景：实时搜索框，等待用户输入完成，才发送 ajax 请求；减少不必要的请求次数，提高性能

demo

https://codepen.io/xgqfrms/pen/rNNoroy

// debounce
// 防抖，是指一个事件触发后在单位时间内，如果发生重复触发了同一事件，则取消上一次的事件，并重新计时️
// 应用场景：实时搜索框，等待用户输入完成，才发送 ajax 请求；减少不必要的请求次数，提高性能

const debounce = (func, delay) => {
  return function(args) {
     const that = this;
     func.id && clearTimeout(func.id);
     func.id = setTimeout(() => {
       func.call(that, args);
     }, delay);
  };
};

const ajax = e => {
  const value = e.target.value || ``;
  console.log(`ajax value`, value);
  pre.insertAdjacentHTML(`beforeend`, `${value} \n`);
};

const input = document.querySelector(`[data-uid="input"]`);
const inputDebounce = document.querySelector(`[data-uid="inputDebounce"]`);
const pre = document.querySelector(`[data-uid="pre"]`);
const btn = document.querySelector(`[data-uid="btn"]`);

btn.addEventListener(`click`, () => {
  input.value = ``;
  inputDebounce.value = ``;
  pre.innerHTML = ``;
});

input.addEventListener(`input`, ajax);
inputDebounce.addEventListener(`input`, debounce(ajax, 500));

throttle 节流

节流，是指在单位时间内, 只会触发一次事件，如果事件触发后，又重复触发了同一事件，则忽略后面触发的事件，直到第一次事件的计时️结束

应用场景：埋点 ??? 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

demo

https://codepen.io/xgqfrms/pen/yLLGxZv

// throttle
// 节流，是指在单位时间内, 只会触发一次事件，如果事件触发后，又重复触发了同一事件，则忽略后面触发的事件，直到第一次事件的计时️结束
// 应用场景：埋点???

const throttle = (func, delay) => {
    let flag = true;
    return function(args) {
        const that = this;
        if(flag) {
            flag = false;
            func.id = setTimeout(() => {
                func.call(that, args);
                clearTimeout(func.id);
                flag = true;
            }, delay);
        } else {
            // ignore
            console.log(`ignore event`);
        }
    };
};

const ajax = e => {
    const value = e.target.value || ``;
    console.log(`ajax value`, value);
    pre.insertAdjacentHTML(`beforeend`, `${value} \n`);
};

const input = document.querySelector(`[data-uid="input"]`);
const inputThrottle = document.querySelector(`[data-uid="inputThrottle"]`);
const pre = document.querySelector(`[data-uid="pre"]`);
const btn = document.querySelector(`[data-uid="btn"]`);

btn.addEventListener(`click`, () => {
    input.value = ``;
    inputThrottle.value = ``;
    pre.innerHTML = ``;
});

input.addEventListener(`input`, ajax);
inputThrottle.addEventListener(`input`, throttle(ajax, 3000));

debounce / throttling

防抖 / 节流

https://www.npmjs.com/package/throttle-debounce

前端性能优化

白屏/首屏 性能优化

https://www.cnblogs.com/xgqfrms/p/13654839.html#4681503

lodash

https://lodash.com/docs/4.17.15#debounce

https://lodash.com/docs/4.17.15#throttle

_.debounce(func, [wait=0], [options={}])

_.throttle(func, [wait=0], [options={}])

lodash 源码剖析

https://github.com/xgqfrms/lodash/issues/1

underscore 源码剖析

https://github.com/xgqfrms/underscore/issues/1

refs

https://css-tricks.com/the-difference-between-throttling-and-debouncing/

https://css-tricks.com/debouncing-throttling-explained-examples/

https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf

https://www.telerik.com/blogs/debouncing-and-throttling-in-javascript

https://github.com/niksy/throttle-debounce#readme

https://blog.bitsrc.io/understanding-throttling-and-debouncing-973131c1ba07

---

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---