在一个电影项目中，我想在电影的列表中，保存下拉的当前位置，防止你切换页面后，再切换回当前的电影列表页，他就又回到电影的第一条数据。
这时候，我不想每次只要滑动一点，就保存当前位置，我想隔一段时间，保存一次，这时候，就可以使用防抖和节流。
概念
说白了， 防抖节流就是使用定时器 来实现我们的目的。
防抖(debounce)：
在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
典型的案例就是输入框搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，则重新计时。
节流(throttle)：
规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效。
典型的案例就是鼠标不断点击触发，规定在n秒内多次点击只生效一次。
用法
防抖(debounce)
下拉列表，隔一段时间保存当前下拉位置。
我们可以在 mounted 钩子中实现我们的防抖：
// 防抖 定时器
let timer;
//list就是电影列表 ref="list" $el获取DOM元素
this.$refs.list.$el.addEventListener("scroll", e => {
console.log("---->",e.target.scrollTop) //不使用防抖
if (timer) {
//清空timer
clearTimeout(timer);
}
timer = setTimeout(() => {
console.log(e.target.scrollTop) //使用防抖
//在sessionStorage中保存当前下拉位置
// sessionStorage.setItem("position", e.target.scrollTop);
}, 75); //75mm为最佳
});
效果演示(隔一段时间保存当前位置)：
加 ----> 为不使用防抖，没加的则使用防抖
输入框搜索隔段时间进行搜索请求：
<template>
<div>
<input type="text" @keyup="debounce" />
</div>
</template>
<script>
//定义 timer
let timer;
export default {
methods: {
debounce: function() {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
console.log("防抖...");
timer = undefined;
}, 2000);
}
}
};
</script>
节流(throttle)
在n秒内点击多次，只有一次生效。
<template>
<div>
<button @click="throttle">按钮</button>
</div>
</template>
<script>
//定义
let timer, lastTime;
export default {
methods: {
throttle: function() {
let now = +new Date();
if (lastTime && lastTime - now < 200) { //在200ms内点击多次，只有一次生效
clearTimeout(timer);
}
timer = setTimeout(() => {
console.log("点击...");
lastTime = +new Date();
}, 200);
}
}
};
</script>
效果演示：
补充
当然，也可以对这两个方法进行封装，以便在多处使用。
/**
* 函数防抖 (只执行最后一次点击)
*/
export const Debounce = (fn, t) => {
let delay = t || 500;
let timer;
console.log(fn)
console.log(typeof fn)
return function () {
let args = arguments;
if(timer){
clearTimeout(timer);
}
timer = setTimeout(() => {
timer = null;
fn.apply(this, args);
}, delay);
}
};
/*
* 函数节流
*/
export const Throttle = (fn, t) => {
let last;
let timer;
let interval = t || 500;
return function () {
let args = arguments;
let now = +new Date();
if (last && now - last < interval) {
clearTimeout(timer);
timer = setTimeout(() => {
last = now;
fn.apply(this, args);
}, interval);
} else {
last = now;
fn.apply(this, args);
}
}
};
总结
以上所述是小编给大家介绍的Vue 防抖与节流的使用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。