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 ...
随机推荐
- jenkins 管理员密码重置
jenkins管理员 admin的密码忘记怎么重置呢? 修改admin的加密密码为123456的加密密码 #jbcrypt:$2a$10$MiIVR0rr/UhQBqT.bBq0QehTiQVqgNp ...
- Proxy-代理器(预计vue3.0实现双向绑定的方式)
todo 常见的基于数据劫持的双向绑定有两种实现,一个是目前Vue在用的Object.defineProperty,另一个是ES2015中新增的Proxy,而Vue的作者宣称将在Vue3.0版本后加入 ...
- wannafly 挑战赛8 E 小G的项链(manecher)
链接:https://www.nowcoder.com/acm/contest/57/E 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65536K 64bit ...
- android UI设计及开发
一.viewPager实现左右滑动及导引功能 1,如果每个屏幕只是一个简单的布局,如果简单的话,定义一个arraryIist<View>,利用addview将所有的布局加载, 然后为vie ...
- Linux shell - cut命令用法(转载)
cut [-bn] [file] 或 cut [-c] [file] 或 cut [-df] [file] 使用说明 cut 命令从文件的每一行剪切字节.字符和字段并将这些字节.字符和字段写至标 ...
- Zookeeper集群及配置
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- 微信小程序 API 网络(ajax)
网络 API 类似于 ajax 向服务器请求网络地址,唯一不同的是这个请求有很多的规则,且必须向服务器上请求,不能在本地请求 网络 发送请求: wx.request() 发起https网络请求 参数: ...
- Dubbo负载均衡:最少活跃数(LeastActive)
官方文档定义 最少活跃调用数,相同活跃数的随机,活跃数指调用前后计数差. 使慢的提供者收到更少请求,因为越慢的提供者的调用前后计数差会越大. 关于活跃数 最少活跃数负载均衡,最关键的点在于活跃数.活跃 ...
- leetcode-mid-Linked list- 200. Number of Islands¶
mycode 57.92% class Solution(object): def numIslands(self, grid): """ :type grid: Li ...
- Flask基础总结
Flask 基础总结 .Flask优点: 拥有强大的第三方组件小而精非常全面,不足就是更新太快 .Flask中的三剑客: HTTPRespone redierct render_template .F ...