Vue最新防抖方案(必看篇)


Posted in Javascript onOctober 30, 2019

函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。举个栗子,持续触发scroll事件时,并不执行handle函数,当1000毫秒内没有触发scroll事件时,才会延时触发scroll事件。

函数节流(throttle):当持续触发事件时,保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水,阀门一打开,水哗哗的往下流,秉着勤俭节约的优良传统美德,我们要把水龙头关小点,最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴。举个栗子,持续触发scroll事件时,并不立即执行handle函数,每隔1000毫秒才会执行一次handle函数。

防抖实例:

<script>
const delay = (function () {
 let timer = 0
 return function (callback, ms) {
  clearTimeout(timer)
  timer = setTimeout(callback, ms)
 }
})()
export default {
methods:{
fn() {
   delay(() => {
    //执行部分
   }, 500)
}
}
}
</script>

节流实例:

var throttle = function(func, delay) {      
  var timer = null;      
  return function() {        
    var context = this;        
    var args = arguments;        
    if (!timer) {          
      timer = setTimeout(function() {            
        func.apply(context, args);            
        timer = null;          
      }, delay);        
    }      
  }    
}    
function handle() {      
  console.log(Math.random());    
}    
window.addEventListener('scroll', throttle(handle, 1000));

以上这篇Vue最新防抖方案(必看篇)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS阻止冒泡事件以及默认事件发生的简单方法
Jan 17 Javascript
JQuery右键菜单插件ContextMenu使用指南
Dec 19 Javascript
JavaScript中string转换成number介绍
Dec 31 Javascript
jQuery创建DOM元素实例解析
Jan 19 Javascript
原生js实现class的添加和删除简单代码
Jul 12 Javascript
js图片切换具体实现代码
Oct 13 Javascript
Javascript 编码约定(编码规范)
Mar 11 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
elementUI select组件value值注意事项详解
May 29 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 Javascript
Postman动态获取返回值过程详解
Jun 30 Javascript
vue输入节流,避免实时请求接口的实例代码
Oct 30 #Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 #Javascript
解决在Vue中使用axios用form表单出现的问题
Oct 30 #Javascript
vue路由 遍历生成复数router-link的例子
Oct 30 #Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 #Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 #Javascript
微信小程序基于高德地图查找位置并显示文字
Oct 30 #Javascript
You might like
第十节--抽象方法和抽象类
2006/11/16 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
php-msf源码详解
2017/12/25 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
javascript引用对象的方法代码
2007/08/13 Javascript
jquery tools之tooltip
2009/07/25 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
jQuery基础知识小结
2014/12/22 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
JavaScript 封装一个tab效果源码分享
2015/09/15 Javascript
简单讲解jQuery中的子元素过滤选择器
2016/04/18 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
js 概率计算(简单版)
2017/09/12 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
vue cli升级webapck4总结
2018/04/04 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
vue项目移动端实现ip输入框问题
2019/03/19 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python迭代器的使用方法实例
2013/11/21 Python
详解Python3中字符串中的数字提取方法
2017/01/14 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
python 搜索大文件的实例代码
2019/07/08 Python
python中 * 的用法详解
2019/07/10 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
python模块导入的方法
2019/10/24 Python
能否解释一下XSS cookie盗窃是什么意思
2012/06/02 面试题
校园门卫岗位职责
2013/12/09 职场文书
厂长助理岗位职责
2013/12/27 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
另类冲刺标语
2014/06/24 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
详解vue中v-for的key唯一性
2021/05/15 Vue.js