浅析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 CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
js处理json以及字符串的比较等常用操作
Sep 08 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 Javascript
JavaScript中的cacheStorage使用详解
Jul 29 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
Aug 10 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
Sep 21 Javascript
javascript实现随机显示星星特效
Jan 28 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
vue2使用keep-alive缓存多层列表页的方法
Sep 21 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
我的群发邮件程序
2006/10/09 PHP
PHP实现懒加载的方法
2015/03/07 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
php制作简单模版引擎
2016/04/07 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
JS数组的赋值介绍
2014/03/10 Javascript
Jquery倒计时源码分享
2014/05/16 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
2015/03/31 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
2017/07/04 Javascript
AngularJS表单验证功能
2017/10/19 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
angular 数据绑定之[]和{{}}的区别
2018/09/25 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
基于JS判断对象是否是数组
2020/01/10 Javascript
vue中activated的用法
2021/01/03 Vue.js
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
用python生成1000个txt文件的方法
2018/10/25 Python
jupyter notebook 中输出pyecharts图实例
2020/04/23 Python
Python collections模块的使用方法
2020/10/09 Python
anaconda升级sklearn版本的实现方法
2021/02/22 Python
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
促销活动总结
2014/04/28 职场文书
消防志愿者活动方案
2014/08/23 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
react 项目中引入图片的几种方式
2021/06/02 Javascript
详解Redis复制原理
2021/06/04 Redis
Python中的套接字编程是什么?
2021/06/21 Python