1.节流:在指定的时间间隔内只执行一次函数调用。如果在这段时间内多次触发事件,只有第一次触发会立即执行函数,后续触发会被忽略。(e.g.:点击一个检查更新的按钮,一定时间内连续多次点击导致检查频率很高,弹窗多次蹦出来。可以通过节流比如3秒,当点击一次过后连续点击间隔在三秒以内则不触发)
//声明一个全局变量存储触发时间
let lastClickTime = nullm
//页面点击事件
checkUpdate function () {
//1.每一次触发 先获取本次时间戳
let currentTime = Date.now()
//2.判断当前时间 与 上次触发时间 是否超过间隔
if (currentTime - lastTime >= 500) {
axios.get(**********************)
//3.存储本次的触发时间
lastTime = currentTime
}
}
2.防抖:在指定的时间间隔内,如果连续触发事件,只有最后一次触发会延迟执行函数。如果在延迟期间再次触发事件,延迟会被重新计算。(e.g.:监听一个页面input输入,你在输入的每一个字母都会触发,你想输入完毕时再触发时可用防抖)
watch: {
imageSaveTime: function() {
var self = this
// 清除之前的计时器
clearTimeout(self.timer)
// 重新设置新的计时器
self.timer = setTimeout(function() {
axios.post(*****************************).then(
axios.get(***************************))
}, 1000)
}
},