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 相关文章推荐
javascript中的return和闭包函数浅析
Jun 06 Javascript
jQuery控制TR显示隐藏的几种方法
Jun 18 Javascript
js实时获取并显示当前时间的方法
Jul 31 Javascript
Bootstrap入门书籍之(一)排版
Feb 17 Javascript
创建一个类Person的简单实例
May 17 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
Vue基于NUXT的SSR详解
Oct 24 Javascript
基于vue-video-player自定义播放器的方法
Mar 21 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
Mar 01 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 Javascript
JavaScript命令模式原理与用法实例详解
Mar 10 Javascript
原生js实现照片墙效果
Oct 13 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
php从完整文件路径中分离文件目录和文件名的方法
2015/03/13 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
javascript中的变量是传值还是传址的?
2010/04/19 Javascript
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
JS数学函数Exp使用说明
2012/08/09 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
2013/06/06 Javascript
js函数排序的实例代码
2013/07/01 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
Mint UI实现A-Z字母排序的城市选择列表
2018/12/28 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
2019/07/09 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
Perl中著名的Schwartzian转换问题解决实现
2015/06/02 Python
Python常用的爬虫技巧总结
2016/03/28 Python
从0开始的Python学习016异常
2019/04/08 Python
Django ORM多对多查询方法(自定义第三张表&amp;ManyToManyField)
2019/08/09 Python
在tensorflow中设置保存checkpoint的最大数量实例
2020/01/21 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
初三化学教学反思
2014/01/23 职场文书
工作自我评价怎么写
2014/01/29 职场文书
户外用品商店创业计划书
2014/01/29 职场文书
保护野生动物倡议书
2014/05/16 职场文书
爱我中华演讲稿
2014/05/20 职场文书
关于读书的演讲稿500字
2014/08/27 职场文书
担保书范文
2015/01/20 职场文书
公司禁烟通知
2015/04/23 职场文书
2016年党建工作简报
2015/11/26 职场文书
创业计划书之酒店
2019/08/30 职场文书
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android