浅析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中:visible选择器用法实例
Dec 30 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
Jun 25 Javascript
Angular中$cacheFactory的作用和用法实例详解
Aug 19 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
Nov 25 Javascript
轻松学习Javascript闭包
Mar 01 Javascript
详解VUE 定义全局变量的几种实现方式
Jun 01 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
vue scroller返回页面记住滚动位置的实例代码
Jan 29 Javascript
React+TypeScript+webpack4多入口配置详解
Aug 08 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 Javascript
Vue的状态管理vuex使用方法详解
Feb 05 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 类商品秒杀计时实现代码
2010/05/05 PHP
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
JavaScript使用Replace进行字符串替换的方法
2015/04/14 Javascript
使用Browserify配合jQuery进行编程的超级指南
2015/07/28 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
原生JS实现幻灯片
2017/02/22 Javascript
javascript实现的图片预览功能
2017/03/25 Javascript
微信小程序页面间通信的5种方式
2017/03/31 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
2017/09/25 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
vue 下列表侧滑操作实例代码详解
2018/07/24 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
opencv与numpy的图像基本操作
2019/03/08 Python
Python3中列表list合并的四种方法
2019/04/19 Python
python中字典按键或键值排序的实现代码
2019/08/27 Python
哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程
2020/05/07 Python
Python常用扩展插件使用教程解析
2020/11/02 Python
网站域名和主机:Domain.com
2019/04/01 全球购物
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
公务员的自我鉴定
2013/10/26 职场文书
学员自我鉴定
2014/03/19 职场文书
庆元旦演讲稿
2014/09/15 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
Nginx安装配置详解
2022/06/25 Servers