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, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/11886342.html
未经授权禁止转载,违者必究!