浅析Vue 防抖与节流的使用


Posted in Javascript onNovember 14, 2019

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

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

概念

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

防抖(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>

浅析Vue 防抖与节流的使用 

节流(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>

效果演示:

浅析Vue 防抖与节流的使用 

补充

当然,也可以对这两个方法进行封装,以便在多处使用。

/**
 * 函数防抖 (只执行最后一次点击)
 */
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 防抖与节流的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JQuery 小练习(实例代码)
Aug 07 Javascript
javascript 文章截取部分无损html显示实现代码
May 04 Javascript
js日期对象兼容性的处理方法
Jan 28 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
js遍历子节点子元素附属性及方法
Aug 19 Javascript
JS中如何实现Laravel的route函数详解
Feb 12 Javascript
JavaScript如何一次性展示几万条数据
Mar 30 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
JavaScript中EventLoop介绍
Jan 22 Javascript
vue 实现cli3.0中使用proxy进行代理转发
Oct 30 Javascript
基于JavaScript判断两个对象内容是否相等
Jan 10 Javascript
vue-cli3 引入 font-awesome的操作
Aug 11 Javascript
微信小程序tabBar设置实例解析
Nov 14 #Javascript
layui清除radio的选中状态实例
Nov 14 #Javascript
在vue中利用v-html按分号将文本换行的例子
Nov 14 #Javascript
搭建Vue从Vue-cli到router路由护卫的实现
Nov 14 #Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 #Javascript
用Node写一条配置环境的指令
Nov 14 #Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
Nov 14 #Javascript
You might like
PHP中获取时间的下一周下个月的方法
2014/03/18 PHP
php中cookie实现二级域名可访问操作的方法
2014/11/11 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
ThinkPHP控制器详解
2015/07/27 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
jquery 延迟执行实例介绍
2013/08/20 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
用Move.js配合创建CSS3动画的入门指引
2015/07/22 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
JavaScript操作 url 中 search 部分方法函数
2016/06/15 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
如何使用jquery实现文字上下滚动效果
2016/10/12 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
Angular表格神器ui-grid应用详解
2017/09/29 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
vue实现输入框自动跳转功能
2020/05/20 Javascript
Vue 同步异步存值取值实现案例
2020/08/05 Javascript
wxPython中listbox用法实例详解
2015/06/01 Python
Python语言描述最大连续子序列和
2017/12/05 Python
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
Abbacino官网:包、钱包和女士配饰
2019/04/15 全球购物
德国Discount-Apotheke中文官网:DC德式康线上药房
2020/02/18 全球购物
大四自我鉴定范文
2013/10/06 职场文书
护理学毕业生求职信
2013/11/14 职场文书
品牌服务方案
2014/06/03 职场文书
办公室规章制度范本
2015/08/04 职场文书
导游词之河北白洋淀
2020/01/15 职场文书