文档章节

vue全局防抖和节流

我心中有猛狗
 我心中有猛狗
发布于 07/02 16:00
字数 449
阅读 68
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

函数防抖

防抖分为两种:

  一种是立即执行:频繁触发事件,第一次触发时执行函数,后面触发不会执行,停止触发,间隔一定时间之后再触发事件,函数才会再次执行
  另一种是后执行:频繁触发事件,事件只会在触发事件之后间隔定义的时间,函数才会被执行,而且只会执行最后一次触发的事件。

在vue中对click添加防抖处理

// 防抖处理-立即执行
const on = Vue.prototype.$on
Vue.prototype.$on = function (event, func) {
  let timer;
  let flag = true;
  let newFunc = func
  if (event == 'click') {
    newFunc = function () {
      if(flag) {
        func.apply(this, arguments)
        flag = false
      }
      clearTimeout(timer)
      timer = setTimeout(function () {
        flag = true
      }, 500)
    }
  }
  on.call(this, event, newFunc)
}



// 防抖处理 -- 最后执行
const on = Vue.prototype.$on
Vue.prototype.$on = function (event, func) {
  let timer
  let newFunc = func
  if (event === 'click') {
    newFunc = function () {
      clearTimeout(timer)
      timer = setTimeout(function () {
        func.apply(this, arguments)
      }, 500)
    }
  }
  on.call(this, event, newFunc)
}

函数节流

  定义:事件触发后,会先执行一次事件函数,执行之后如果在规定时间间隔内再触发事件,将不出触发函数,超过规定的事件间隔后会再次触发一次,如此往复

在vue中对click添加节流处理

// 节流
const on = Vue.prototype.$on

Vue.prototype.$on = function (event, func) {
  let previous = 0
  let newFunc = func
  if (event === 'click') {
    newFunc = function () {
      const now = new Date().getTime()
      if (previous + 1000 <= now) {
        func.apply(this, arguments)
        previous = now
      }
    }
  }
  on.call(this, event, newFunc)
}

使用方式:
选择一种,将代码复制粘贴在main.js即可。

我心中有猛狗
粉丝 6
博文 136
码字总数 44432
作品 0
石家庄
私信 提问
加载中
请先登录后再评论。
JavaScript 模板引擎--tpl.js

一个轻量的(仅1kb),极速的javascript 模板引擎。 支持预编译,支持嵌入原生javascript语法,忽略不存在的变量,可直接在AMD、CMD以及全局环境中使用。 使用方法: 1.引入tpl.js <script ...

JonyZhang
2013/06/24
9.8K
2
一道JS前端闭包面试题解析

问题 代码A 求出程序输出 这是一个闭包测试题 转换为等价代码 return返回的对象的fun属性对应一个新建的函数对象,这个函数对象将形成一个闭包作用域,使其能够访问外层函数的变量n及外层函数...

浩爷
2015/12/25
1.8K
1
Java IO 之 FileInputStream & FileOutputStream源码分析

Writer :BYSocket(泥沙砖瓦浆木匠) 微 博:BYSocket 豆 瓣:BYSocket FaceBook:BYSocket Twitter :BYSocket 一、引子 文件,作为常见的数据源。关于操作文件的字节流就是 — FileInputS...

泥沙砖瓦浆木匠
2015/10/09
855
0
前端最新技术学习地址总结

主流技术官网总结 1.1. 工具类 Glup 官网:http://www.gulpjs.com.cn/ http://i5ting.github.io/stuq-gulp/#10202 Webpack 官网:http://webpack.js.org GitBook:http://fakefish.github.io/r......

龙马行空
2016/01/14
1.9K
1
微信图片反防盗链的方法(此图片来自微信公众平台,未经允许不可引用)

!!!!!!!!!!!!!!!!!!该方法目前测试已经被微信屏蔽了~~所以大家最好的方法还是将图片down下来保存到自己的服务器中!!!!!!!!!!!!!!!!!!!! 因为在标签中...

wsy940822
2016/03/17
2.5W
26

没有更多内容

加载失败,请刷新页面

加载更多

PHP中的startsWith()和endsWith()函数 - startsWith() and endsWith() functions in PHP

问题: How can I write two functions that would take a string and return if it starts with the specified character/string or ends with it? 我如何编写两个带字符串的函数,如果它以......

技术盛宴
25分钟前
28
0
OSChina 周一乱弹 —— 你想用屁治疗一下谁

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @薛定谔的兄弟 :分享洛神有语创建的歌单「我喜欢的音乐」: 《Rain in the Park》- Marika Takeuchi 手机党少年们想听歌,请使劲儿戳(这里)...

小小编辑
29分钟前
18
0
在C#中调用基本构造函数 - Calling the base constructor in C#

问题: If I inherit from a base class and want to pass something from the constructor of the inherited class to the constructor of the base class, how do I do that? 如果我从基类......

富含淀粉
55分钟前
7
0
用Python构建个性化智能闹钟

作者|Kumar Shubham 编译|VK 来源|Towards Data Science 你可能之前有见过有人使用Python语言构建闹钟,帮助他唤醒或提醒他一个重要的会议。 这些都是很简单,没有任何智能,他们所做的只是播...

人工智能遇见磐创
今天
18
0
前端学数据结构与算法(二):数组与栈

前言 数据结构与算法有相互依存的关系,如果将这个两个又进行划分,无疑数据结构又是这座大厦的基础。首先从线性数据结构开始,介绍大家耳熟能详的数据结构-数组。因为JavaScript已经为数组封...

飞跃疯人院
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部