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学习随笔(使用window和frame)的技巧
Mar 08 Javascript
侧栏跟随滚动的简单实现代码
Mar 18 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
Aug 06 Javascript
JavaScript 语言基础知识点总结(思维导图)
Nov 10 Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
HTML页面登录时的JS验证方法
May 28 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
Mar 09 Javascript
微信小程序中吸底按钮适配iPhone X方案
Nov 29 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
Jul 09 Javascript
LayUI+Shiro实现动态菜单并记住菜单收展的示例
May 06 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
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
第4章 数据处理-php数组的处理-郑阿奇
2011/07/04 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
php版阿里云OSS图片上传类详解
2016/12/01 PHP
利用php-cli和任务计划实现订单同步功能的方法
2017/05/03 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
模拟jQuery中的ready方法及实现按需加载css,js实例代码
2013/09/27 Javascript
7个JS基础知识总结
2014/03/05 Javascript
JavaScript数据类型学习笔记分享
2016/09/01 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
[02:10]三分钟回顾完美世界城市挑战赛
2019/01/24 DOTA
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
php使用递归与迭代实现快速排序示例
2014/01/23 Python
深入理解python try异常处理机制
2016/06/01 Python
Python排序算法实例代码
2017/08/10 Python
Django中ORM表的创建和增删改查方法示例
2017/11/15 Python
Python3中的json模块使用详解
2018/05/05 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
卡拉威高尔夫官方网站:Callaway Golf
2020/09/16 全球购物
九州传奇上机题
2014/07/10 面试题
网络编辑求职信
2014/04/30 职场文书
保险专业求职信
2014/07/07 职场文书
四风问题专项整治工作情况报告
2014/10/28 职场文书
鸡毛信观后感
2015/06/11 职场文书
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA