javascript【应用】debounce和throttle
2024-10-21 12:55:45
debounce防抖
在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。
<div id="app">
输入内容：<input type="text" class="input" @keyup="deb"/>
<div> 输入次数：{{ num }}</div>
</div>
let time
var app = new Vue({
el: '#app',
data: {
num: 0,
},
methods: {
deb: function () {
let that = this
if (time) {
clearTimeout(time)
}
time = setTimeout(function () {
that.num++
console.log('输入了' + that.num + '次')
time = undefined;
}, 2000)
}
})
throttle节流
规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效； 典型的案例就是鼠标不断点击触发，规定在n秒内多次点击只有一次生效。
在某应用购买火车票/飞机票等商品的时候，不断地点击刷新购买，总不能一直点击一直请求吧，系统会崩掉的，所以节流就很有必要了。
<div id="app">
<button @click="thr">点击</button>
<div>实际点击：{{clicknumber}}</div>
<div>有效点击：{{num}}</div>
</div>
let time
let lastTime
var app = new Vue({
el: '#app',
data: {
num: 0,
clicknumber: 0
},
methods: {
thr: function () {
this.clicknumber++
let that = this
let now = new Date();
if (lastTime && now - lastTime < 2000) {
clearTimeout(time)
}
time = setTimeout(function () {
that.num++
console.log('点击了' + that.num + '次')
lastTime = new Date()
}, 500)
}
}
})
区别
防抖动是将多次执行变为最后一次执行
节流是将多次执行变成每隔一段时间执行
最新文章
- 网络/运维工程师visio2013模具图标 绘制漂亮的网络拓扑图 狮子XL工程师美学思想
- Eclipse定制右键创建文件快捷菜单
- xml基础学习笔记04
- UML——动态建模
- c#md5与SHA1验证函数
- Android Studio中如何创建AIDL
- webstorm安装express报错
- Java中两个List对比的算法
- IDEA 编译等级与源代码等级不一致问题
- 微信小程序教学第三章第三节（含视频）：小程序中级实战教程：视图与数据关联
- python实现时间o(1)的最小栈
- WebFTP安装说明
- HTML文本结构及常用标签
- day 12
- Code POJ - 1780（栈模拟dfs）
- [Stats385] Lecture 05: Avoid the curse of dimensionality
- maven项目启动报错：SLF4J: Class path contains multiple SLF4J bindings.
- 蓝桥杯之剪格子（经典dfs）
- E - 食物链
- centos7.3上安装oracle xe 11g