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学习网址备忘
May 29 Javascript
js 纯数字不重复排列的另类方法
Jul 17 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
Jun 06 Javascript
JQuery做的一个简单的点灯游戏分享
Jul 16 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
Oct 20 Javascript
Node.js中使用jQuery的做法
Aug 17 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
Aug 29 Javascript
jQuery 选择器(61种)整理总结
Sep 26 Javascript
vue.js实现请求数据的方法示例
Feb 07 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
20个必会的JavaScript面试题(小结)
Jul 02 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/10/09 PHP
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
解决phpcms更换javascript的幻灯片代码调用图片问题
2014/12/26 PHP
PHP根据图片色界在不同位置加水印的方法
2015/07/01 PHP
PHP生成随机密码方法汇总
2015/08/27 PHP
10款实用的PHP开源工具
2015/10/23 PHP
ThinkPHP5.1的权限控制怎么写?分享一个AUTH权限控制
2021/03/09 PHP
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
Visual Studio中js调试的方法图解
2014/06/30 Javascript
windows8.1+iis8.5下安装node.js开发环境
2014/12/12 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
vue 使用鼠标滚动加载数据的例子
2019/10/31 Javascript
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
Python去掉字符串中空格的方法
2014/03/11 Python
Python标准库与第三方库详解
2014/07/22 Python
使用Python的Django框架实现事务交易管理的教程
2015/04/20 Python
Python zip()函数用法实例分析
2018/03/17 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
Python 实现域名解析为ip的方法
2019/02/14 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
python 日志模块 日志等级设置失效的解决方案
2020/05/26 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
2014年上半年工作自我评价
2014/01/18 职场文书
单位委托函范文
2015/01/29 职场文书
2015年出纳工作总结与计划
2015/05/18 职场文书
2016年清明节期间群众祭祀活动工作总结
2016/04/01 职场文书
靠谱准确的求职信
2019/04/02 职场文书
用Python爬取某乎手机APP数据
2021/06/15 Python
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS