vue 防抖和节流
函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。
函数节流(throttle):当持续触发事件时,保证一定时间段内只调用一次事件处理函数。
js代码
/**
* @desc 函数防抖
* @param fn 函数
* @param delay 延迟执行毫秒数 默认0.5s
*/
export function debounce(fn, delay) {
var delay = delay || ;
var timer;
return function () {
console.log('调用了debounce方法')
let args = arguments;
if(timer){
clearTimeout(timer);
}
timer = setTimeout(() => {
timer = null;
fn.apply(this, args);
}, delay);
}
} /**
* @desc 函数节流
* @param fn 函数
* @param interval 函数执行间隔时间毫秒数 默认1s
*/
export function throttle(fn, interval) {
var last;
var timer;
var interval = interval || ;
return function () {
console.log('调用了throttle方法')
var th = this;
var args = arguments;
var now = +new Date();
if (last && now - last < interval) {
clearTimeout(timer);
timer = setTimeout(function () {
last = now;
fn.apply(th, args);
}, interval);
} else {
last = now;
fn.apply(th, args);
}
}
}
在vue中使用
<template>
<view>
<text @tap="clickDebounce()">防抖</text>
<text @tap="clickThrottle()">节流</text>
</view>
</template> <script>
import { debounce, throttle } from '@/utils/index.js'
export default {
data() {
return {
num: 0
}
},
methods: {
// 防抖
clickDebounce: debounce(function() {
this.num += 1
console.log('第' + this.num +'次点击' )
}, 600),
// 节流
clickThrottle: throttle(function() {
this.num += 1
console.log('第' + this.num +'次点击' )
}, 800)
}
}
</script>
运行结果
vue 防抖和节流的更多相关文章
- Javascript的防抖和节流、VUE的防抖和节流
js原生 函数防抖:将几次操作合并为一此操作进行.原理是维护一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置.这样一来,只有最后一次操作能 ...
- vue防抖节流之v-debounce--throttle使用指南
最新封装了一个vue防抖节流自定义指令,发布到npm上,有用欢迎star,谢谢! npm地址:https://www.npmjs.com/package/v-debounce-throttle git ...
- vue函数防抖和节流
Vue函数防抖和节流https://zhuanlan.zhihu.com/p/72363385 <template> <div> <input type='text' v ...
- v-debounce-throttle是一个vue防抖节流指令
v-debounce-throttle是一个vue防抖节流指令 简介 v-debounce-throttle是一个vue防抖节流指令,控制单一事件的触发频率.其核心是拦截组件元素的v-on绑定事件,采 ...
- js高阶函数应用—函数防抖和节流
高阶函数指的是至少满足下列两个条件之一的函数: 1. 函数可以作为参数被传递:2.函数可以作为返回值输出: javaScript中的函数显然具备高级函数的特征,这使得函数运用更灵活,作为学习js必定会 ...
- js防抖和节流
今天在网上看到的,里面的内容非常多.说下我自己的理解. 所谓的防抖就是利用延时器来使你的最后一次操作执行.而节流是利用时间差的办法,每一段时间执行一次.下面是我的代码: 这段代码是右侧的小滑块跟随页面 ...
- 2019 面试准备 - JS 防抖与节流 (超级 重要!!!!!)
Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 你们的 star 是我学习的动力!GitHub 地址 本文涉及知识点: 防抖与节流 重绘与回流 浏览器解析 URL DNS 域名解析 ...
- 详谈js防抖和节流
本文由小芭乐发表 0. 引入 首先举一个例子: 模拟在输入框输入后做ajax查询请求,没有加入防抖和节流的效果,这里附上完整可执行代码: <!DOCTYPE html> <html ...
- 深入理解JS防抖与节流
参考博客:JS防抖和节流,感谢作者的用心分享 日常开发过程中,滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿,这时候我们更希望把多次计算合并成一次,只操作一个精确点,JS把这种方式称为deb ...
随机推荐
- FJWC2017&FJOI2017一试 游记
day1 早上是以前泉州七中的杨国烨讲课.(据说当时看新闻说是一对双胞胎一起上thu的其中一个)课题是图论/网络流. 下午第一道一开始推出来了一个之和面积有关的式子,然后觉得可以容斥一发,觉得 ...
- Spring Boot教程(三)消费Restful的web服务
构架工程 创建一个springboot工程,去消费RESTFUL的服务.这个服务是 http:///gturnquist-quoters.cfapps.io/api/random ,它会随机返回Jso ...
- HDU1575--Tr A(矩阵快速幂)
Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission(s) ...
- 《Effective Java》读书笔记 - 8.通用编程
Chapter 8 General Programming Item 45: Minimize the scope of local variables local variables应该在他们要被用 ...
- List of Mozilla-Based Applications
List of Mozilla-Based Applications The following is a list of all known active applications that are ...
- Linux驱动开发8——中断处理
中断包括软中断和硬中断两种,中断是一种异步I/O机制,即中断可以发生在任意时间点. 1.硬中断 硬件中断包括触发中断和处理中断两部分,而维系两者的是中断号,中断号是一种硬件资源. 1.1.注册和释放中 ...
- nginx请求转发配置
以下为无ssl证书配置的请求转发 server { listen ; server_name api.****.com; #以下为指定请求域名匹配到某一个端口 #location ~* /union ...
- 在windows下使用Mingw搭建模拟Linux
1.到官网下载最新版Mingw 2.点击安装,最好选择默认路径,如果不是的话,路径中一定不能有空格. 3.选择安装,mingw-developer-toolkit.mingw32-base.mingw ...
- JS遍历二维数组
//求平均数 var pjs=[ ['小明',87], ['小红',81], ['小花',97], ['小天',76], ['小张',74], ['小小',94], ['小西',90], ['小武', ...
- autoprefixer不起作用的坑
概述 今天同事说,nuxt.js的项目好像没有自动加前缀,我花了很长时间查找原因,最后终于发现,原来是没有加.browserslistrc文件...记录下来,供以后开发时参考,相信对其他人也有用. b ...