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实现九宫格图片半透明渐显特效的方法
Feb 16 Javascript
Javascript的表单验证-初识正则表达式
Mar 18 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
bootstrap快速制作后台界面
Dec 05 Javascript
JS简单获取当前年月日星期的方法示例
Feb 07 Javascript
js制作简单的音乐播放器的示例代码
Aug 28 Javascript
实例讲解JavaScript截取字符串
Nov 30 Javascript
mpvue开发音频类小程序踩坑和建议详解
Mar 12 Javascript
微信小程序保存图片到相册权限设置
Apr 09 Javascript
js实现小球在页面规定的区域运动
Jun 16 Javascript
微信小程序实现多图上传
Jun 19 Javascript
详解JavaScript 作用域
Jul 14 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网页游戏学习之Xnova(ogame)源码解读(一)
2014/06/23 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
twig模板常用语句实例小结
2016/02/04 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
PHP new static 和 new self详解
2017/02/19 PHP
PHP4和PHP5版本下解析XML文档的操作方法实例分析
2017/05/20 PHP
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
jQuery源码分析之Event事件分析
2010/06/07 Javascript
javascript Array对象基础知识小结
2010/11/16 Javascript
json数据与字符串的相互转化示例
2013/09/18 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
详解Vue 全局引入bass.scss 处理方案
2018/03/26 Javascript
详解如何用typescript开发koa2的二三事
2018/11/13 Javascript
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
python实现类的静态变量用法实例
2015/05/08 Python
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
python3个性签名设计实现代码
2018/06/19 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
python:HDF和CSV存储优劣对比分析
2020/06/08 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
python3中数组逆序输出方法
2020/12/01 Python
计算机毕业大学生推荐信
2013/12/01 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
四十年同学聚会致辞
2015/07/28 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书