大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全家桶1年46,售后保障稳定
什么是防抖
当事件被触发后,延迟几秒后再执行回调,如果在这几秒内事件又被触发,则重新计时。如:游戏中的回城机制,中途打断后必须要重新回城,重新读条。
应用场景
用户在输入框中连续输入一串字符时,可以通过防抖策略,只有在输入完后,才执行查询的请求,这样可以有效减少次数,节约请求资源。
例如:实现输入框的防抖
//模拟ajax请求
function ajax(content) {
console.log('ajax request ' + content);
}
let inputa = document.getElementById('unDebounce');
inputa.addEventListener('keyup', function (e) {
ajax(e.target.value);
})
只要按下键盘,就会触发ajax请求。从资源上来说是很浪费的行为,实际应用中,用户是输出完整的字符后才会请求。可以进行优化:
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)
})
加入了防抖后,在频繁的输入时不会发送请求,只有当在指定间隔内没有输入时,才会执行函数。如果停止输入但是在指定间隔内又输入,会重新触发计时。
防抖代码
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 实现。目的都是降低回调执行频率,节省计算资源。
节流代码
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
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...