xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

js debounce & throttle All In One

js debounce & throttle All In One

debounce & throttle

js 节流 防抖

debounce 防抖

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

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

demo


// 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

// 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 发布文章使用:只允许注册用户才可以访问!

原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!


posted @ 2019-11-18 23:16  xgqfrms  阅读(275)  评论(11编辑  收藏  举报