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版网站风格切换实例代码
Oct 06 Javascript
js下利用控制器载入对应脚本
Jul 17 Javascript
javascript循环变量注册dom事件 之强大的闭包
Sep 08 Javascript
jquery动态添加option示例
Dec 30 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
Mar 04 Javascript
jquery表单验证实例仿Toast提示效果
Mar 03 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
Mar 13 Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 Javascript
JavaScript中call和apply方法的区别实例分析
Aug 03 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
Jun 11 Javascript
让你30分钟快速掌握vue3教程
Oct 26 Javascript
详解vue修改elementUI的分页组件视图没更新问题
Nov 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之autoload运行机制实例分析
2014/08/28 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
Laravel框架Eloquent ORM删除数据操作示例
2019/12/03 PHP
异步javascript的原理和实现技巧介绍
2012/11/08 Javascript
Extjs grid panel自带滚动条失效的解决方法
2014/09/11 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
详解vue组件通信的三种方式
2017/06/30 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
js实现小时钟效果
2020/03/25 Javascript
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
Python struct模块解析
2014/06/12 Python
python网络编程之读取网站根目录实例
2014/09/30 Python
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
Python获取服务器信息的最简单实现方法
2015/03/05 Python
python实现多线程抓取知乎用户
2016/12/12 Python
详解tensorflow载入数据的三种方式
2018/04/24 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
从0开始的Python学习016异常
2019/04/08 Python
Python实现FM算法解析
2019/06/18 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
几个Linux面试题笔试题
2016/08/01 面试题
报关简历自我评价怎么写
2013/09/19 职场文书
摄影展策划方案
2014/06/02 职场文书
2014年大学班长工作总结
2014/11/14 职场文书
2015年美容师个人工作总结
2015/10/14 职场文书
z-index不起作用
2021/03/31 HTML / CSS
python如何正确使用yield
2021/05/21 Python