浅析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 相关文章推荐
认识延迟时间为0的setTimeout
May 16 Javascript
图片自动缩小 点击放大
Jul 07 Javascript
javascript获取URL参数与参数值的示例代码
Dec 20 Javascript
浅谈javascript回调函数
Dec 07 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 Javascript
jquery Form轻松实现文件上传
May 24 jQuery
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
详解React中合并单元格的正确写法
Jan 08 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
Mar 07 Javascript
浅谈vue项目用到的mock数据接口的两种方式
Oct 09 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 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使用GD库创建图片缩略图的方法
2015/06/10 PHP
Zend Framework基本页面布局分析
2016/03/19 PHP
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
js控制表单操作的常用代码小结
2013/08/15 Javascript
javascript制作2048游戏
2015/03/30 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
vue实例中data使用return包裹的方法
2018/08/27 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
es6 for循环中let和var区别详解
2020/01/12 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
vue实现公告栏文字上下滚动效果的示例代码
2020/06/16 Javascript
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
Python中实现常量(Const)功能
2015/01/28 Python
Python二分法搜索算法实例分析
2015/05/11 Python
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
Django在win10下的安装并创建工程
2017/11/20 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
Python unittest框架操作实例解析
2020/04/13 Python
常用的10个Python实用小技巧
2020/08/10 Python
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
什么是Deployment descriptors;都有什么类型的部署描述符
2015/07/28 面试题
营业员实习自我鉴定
2013/12/07 职场文书
通信研究生自荐信
2014/02/01 职场文书
会走路的树教学反思
2014/02/20 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
寒山寺导游词
2015/02/03 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
简单的辞职信范文(2016最新版)
2015/05/12 职场文书