Vue2.x-使用防抖以及节流的示例


Posted in Vue.js onMarch 02, 2021

utils:

// 防抖
export const debounce = (func, wait = 3000, immediate = true) => {
 let timeout = null;
 return function() {
  let context = this;
  let args = arguments;
  if (timeout) clearTimeout(timeout);
  if (immediate) {
   var callNow = !timeout; //点击第一次为true 时间内点击第二次为false 时间结束则重复第一次
   timeout = setTimeout(() => {
    timeout = null;
   }, wait); //定时器ID
   if (callNow) func.apply(context, args);
  } else {
   timeout = setTimeout(function() {
    func.apply(context, args);
   }, wait);
  }
 };
};
// 时间戳方案
export const throttleTime = (fn, wait = 2000) => {
 var pre = Date.now();
 return function() {
  var context = this;
  var args = arguments;
  var now = Date.now();
  if (now - pre >= wait) {
   fn.apply(context, args);
   pre = Date.now();
  }
 };
};
// 定时器方案
export const throttleSetTimeout = (fn, wait = 3000) => {
 var timer = null;
 return function() {
  var context = this;
  var args = arguments;
  if (!timer) {
   timer = setTimeout(function() {
    fn.apply(context, args);
    timer = null;
   }, wait);
  }
 };
};

vue中使用:

<template>
 <div class="main">
  <p>防抖立即执行</p>
  <button @click="click1">点击</button>

  <br />

  <p>防抖不立即执行</p>
  <button @click="click2">点击</button>

  <br />

  <p>节流时间戳方案</p>
  <button @click="click3">点击</button>

  <br />

  <p>节流定时器方案</p>
  <button @click="click4">点击</button>
 </div>
</template>

<script>
import { debounce, throttleTime, throttleSetTimeout } from './utils';
export default {
 methods: {
  click1: debounce(
   function() {
    console.log('防抖立即执行');
   },
   2000,
   true
  ),
  click2: debounce(
   function() {
    console.log('防抖不立即执行');
   },
   2000,
   false
  ),
  click3: throttleTime(function() {
   console.log('节流时间戳方案');
  }),
  click4: throttleSetTimeout(function() {
   console.log('节流定时器方案');
  })
 },
};
</script>

<style scoped lang="scss">
* {
 margin: 0;
 font-size: 20px;
 user-select: none;
}
.main {
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 width: 500px;
}
button {
 margin-bottom: 100px;
}
</style>

解释:

防抖:

立即执行版本:immediate为true,则点击第一次就执行,再继续点击则不执行,当wait时间结束后,再点击则生效,也就是只执行第一次。

原理:

点击第一次不存在timeoutID,并且callNow为true,则立即执行目标代码,点击第二次时存在了timeoutID,并且callNow为false,所以不执行目标代码,当wait时间结束后,把timeoutID设为null,则开始重复立即执行逻辑。

不立即执行版:immediate为false,则点击第一次不执行,当wait时间结束后,才生效,也就是无论点击多少次,只执行最后一次点击事件

原理:

使用setTimeout延迟执行事件,如果多次触发,则clearTimeout上次执行的代码,重新开始计时,在计时期间没有触发事件,则执行目标代码。

节流:

连续触发事件时以wait频率执行目标代码。

效果:

Vue2.x-使用防抖以及节流的示例

以上就是Vue2.x-使用防抖以及节流的示例的详细内容,更多关于vue 防抖及节流的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
Vue组件简易模拟实现购物车
Dec 21 Vue.js
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
vue 页面跳转的实现方式
Jan 12 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
Vue3中的Refs和Ref详情
Nov 11 Vue.js
Vue监视数据的原理详解
Feb 24 Vue.js
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
vue动态绑定style样式
Apr 20 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 #Vue.js
vue脚手架项目创建步骤详解
Mar 02 #Vue.js
vue-cli中实现响应式布局的方法
Mar 02 #Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 #Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 #Vue.js
vue实现拖拽进度条
Mar 01 #Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 #Vue.js
You might like
PHP通过COM使用ADODB的简单例子
2006/12/31 PHP
PHP中模糊查询并关联三个select框
2017/06/19 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
Javascript学习笔记2 函数
2010/01/11 Javascript
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
javascript实现链接单选效果的方法
2015/05/13 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
原生js实现商品放大镜效果
2017/01/12 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
JavaScript Window浏览器对象模型原理解析
2020/05/30 Javascript
Vue记住滚动条和实现下拉加载的完美方法
2020/07/31 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
python正则表达式re模块详细介绍
2014/05/29 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
Python 私有函数的实例详解
2017/09/11 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
Python中存取文件的4种不同操作
2018/07/02 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
PyTorch的torch.cat用法
2020/06/28 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
购买美国制造的相框和画框架:Picture Frames
2018/08/14 全球购物
Sql面试题
2013/03/20 面试题
经销商培训邀请函
2014/01/21 职场文书
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
作风转变年心得体会
2014/10/22 职场文书
党校毕业个人总结
2015/02/28 职场文书