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 相关文章推荐
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
Vue 组件注册全解析
Dec 17 Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
vue实现轮播图帧率播放
Jan 26 Vue.js
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
详解Vue的sync修饰符
May 15 Vue.js
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
vue 给数组添加新对象并赋值
Apr 20 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学习笔记(一) 简单了解PHP
2014/08/04 PHP
php的闭包(Closure)匿名函数详解
2015/02/22 PHP
一个JS翻页效果
2007/07/23 Javascript
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
js将控件隐藏及display属性的使用介绍
2013/12/30 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
javascript几个易错点记录
2014/11/26 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
jQuery插件slider实现拖动滑块选取价格范围
2015/04/30 Javascript
深入分析javascript中console命令
2016/08/14 Javascript
理解javascript中的闭包
2017/01/11 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
微信小程序之MaterialDesign--input组件详解
2017/02/15 Javascript
vue微信分享 vue实现当前页面分享其他页面
2017/12/02 Javascript
JS控制鼠标拒绝点击某一按钮的实例
2017/12/29 Javascript
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
Python实现pdf文档转txt的方法示例
2018/01/19 Python
python实现转圈打印矩阵
2019/03/02 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
用Python 执行cmd命令
2020/12/18 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
单位介绍信范文
2014/01/18 职场文书
保护环境建议书400字
2014/05/13 职场文书
大四优秀党员个人民主评议
2014/09/19 职场文书
入党团支部推荐意见
2015/06/02 职场文书
《颐和园》教学反思
2016/02/19 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
Python深度学习之Pytorch初步使用
2021/05/20 Python