大家好，又见面了，我是你们的朋友全栈君。
什么是防抖
当事件被触发后，延迟几秒后再执行回调，如果在这几秒内事件又被触发，则重新计时。如：游戏中的回城机制，中途打断后必须要重新回城，重新读条。
应用场景
用户在输入框中连续输入一串字符时，可以通过防抖策略，只有在输入完后，才执行查询的请求，这样可以有效减少次数，节约请求资源。 例如：实现输入框的防抖
代码语言：javascript复制//模拟ajax请求
function ajax(content) {
console.log('ajax request ' content);
}
let inputa = document.getElementById('unDebounce');
inputa.addEventListener('keyup', function (e) {
ajax(e.target.value);
})只要按下键盘，就会触发ajax请求。从资源上来说是很浪费的行为，实际应用中，用户是输出完整的字符后才会请求。可以进行优化：
代码语言：javascript复制function ajax(content) {
console.log('ajax request ' content);
}
function debounce(fun, delay) {
return function (args) {
let that = this;
let _args = args;
clearTimeout(fun.id);
fun.id = setTimeout(function () {
fun.call(that, _args);
}, delay)
}
}
let inputb = document.getElementById('debounce')
let debounceAjax = debounce(ajax, 500)
inputb.addEventListener('keyup', function (e) {
debounceAjax(e.target.value)
})加入了防抖后，在频繁的输入时不会发送请求，只有当在指定间隔内没有输入时，才会执行函数。如果停止输入但是在指定间隔内又输入，会重新触发计时。
防抖代码
代码语言：javascript复制let timer; // 维护同一个timer
function debounce(fn, delay) {
clearTimeout(timer);
timer = setTimeout(function(){
fn();
}, delay);
}
// 用onmousemove测试一下防抖函数:
function testDebounce() {
console.log('test');
}
document.onmousemove = () => {
debounce(testDebounce, 1000);
}
----------------------------------------------
简化后代码：
function debounce(fn, delay) {
let timer; // 维护一个 timer
return function () {
// let _this = this; // 取debounce执行作用域的this
let args = arguments;
if (timer) {
clearTimeout(timer);
}
// timer = setTimeout(function () {
// fn.apply(_this, args); // 用apply指向调用debounce的对象，相当于_this.fn(args);
// }, delay);
timer = setTimeout(()=> {
fn.apply(this, args); // 用apply指向调用debounce的对象，相当于this.fn(args);
}, delay);
};
}
// test
function testDebounce(e, content) {
console.log(e, content);
}
var testDebounceFn = debounce(testDebounce, 1000); // 防抖函数
document.onmousemove = function (e) {
testDebounceFn(e, 'debounce'); // 给防抖函数传参
}什么是节流
即每隔一段时间，只执行一次函数。如游戏中的点击鼠标发射子弹，连续不断点按鼠标，并不会发射更多的子弹，而是按照一定的数量连续发射。
应用场景
1 滚动加载，加载更多或滚到底部监听 2 谷歌搜索框，搜索联想功能 3 高频点击提交，表单重复提交
函数防抖与节流的比较
都可以通过使用 setTimeout 实现。目的都是降低回调执行频率，节省计算资源。
节流代码
代码语言：javascript复制function throttle(fn, delay) {
let timer;
return function () {
let _this = this;
let args = arguments;
if (timer) {
return;
}
timer = setTimeout(function () {
fn.apply(_this, args);
timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
}, delay)
}
}
//test
function testThrottle(e, content) {
console.log(e, content);
}
let testThrottleFn = throttle(testThrottle, 1000); // 节流函数
document.onmousemove = function (e) {
testThrottleFn(e, 'throttle'); // 给节流函数传参
}/** * 触发完事件 n 秒内不再触发事件，n秒后再执行 * 只执行最后一次点击 * @param event * @param time * @param flag 是否立即执行 * @returns {Function} * @constructor */
export function debounce(event, time, flag) {
const interval = time || 500
let timer = null
// 默认立即执行
const f = flag || true
return function(...args) {
clearTimeout(timer)
if (f && !timer) {
event.apply(this, args)
}
timer = setTimeout(() => {
event.apply(this, args)
}, interval)
}
}
/** * 只在单位时间内执行一次 * 第一次事件不会触发，最后一次一定触发 * @param event * @param time * @returns {Function} * @constructor */
export function throttle(event, time) {
const interval = time || 500
let timer = null
return function(...args) {
if (!timer) {
timer = setTimeout(() => {
timer = null
event.apply(this, args)
}, interval)
}
}
}版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/210153.html原文链接：https://javaforall.cn
