不容易制做小程序流程_浅析Vue 防抖与节约的使用

发布时间:2021-01-06 17:03 作者:jianzhan

摘要: 浅谈Vue 防抖与节流阀的应用 防抖节流阀便是应用定时执行器 来完成大家的目地。本文根据案例编码给大伙儿详细介绍vue防抖与节流阀的应用,很感兴趣的朋友追随网编一起看一下

浅析Vue 防抖与节流的使用       防抖节流就是使用定时器 来实现我们的目的。这篇文章通过实例代码给大家介绍vue防抖与节流的使用,感兴趣的朋友跟随小编一起看看吧

在一个电影项目中,我想在电影的列表中,保存下拉的当前位置,防止你切换页面后,再切换回当前的电影列表页,他就又回到电影的第一条数据。

这时候,我不想每次只要滑动一点,就保存当前位置,我想隔一段时间,保存一次,这时候,就可以使用防抖和节流。

概念

说白了, 防抖节流就是使用定时器 来实现我们的目的。

防抖(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 防抖与节流的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!


  • 手机微信微信小程序“大

    模拟题目:手机上手机微信手机微信微信小程序“人的大脑霸者”因题目审查关不紧谨中断服务 DoNews互娱一月32日信息内容(新闻报道新闻记者 顾福昌) 一月30昼夜间,手机上手机微信

  • 怎样设定一个微信小程序

    今早晨来,手机上手机微信不张杨公布手机微信微信小程序可用个人行为行为主体变化功效的新闻报道报导漫天飞,大家针对这事探讨争相,都说手机微信微信小程序将迈进一场“关键

  • 外卖送餐运营额均值提高

    伴随着肺炎疫情逐渐获得操纵,全国性全国各地公司都会抓紧开工复业,随着着这波“开工潮”,工作族的用餐要求俱增。 但在大部分分地域依然限定正餐的状况下,外卖送餐变成了餐

  • 手机微信微信小程序做的

    模拟题目:手机上手机微信手机微信微信小程序做的商城系统系统软件和微店有什么不一样? 倘若非要把手机微信微信小程序跟微店做对比,那麼就理应是手机微信微信小程序可以开发

  • 多店家商家微信小程序商

    模拟题目:多商家店家手机微信微信小程序商城系统系统软件怎样做?手机微信微信小程序开实体线店怎样进行? 商家入驻型的手机微信微信小程序是如何吸引住住的呢? 简单地来说就