vue-练习防抖-和-节流
vue 中防抖和节流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue中的防抖</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<input type='text' v-model='value' @keydown="hangleChange">
</div>
</div>
</body>
<script>
function debounce(func, wait = 1000) { //可以放入项目中的公共方法中进行调用
let timeout;
return function (event) {
clearTimeout(timeout)
timeout = setTimeout(() => {
func.call(this, event)
}, wait)
}
}
let app = new Vue({
el: '#app',
data() {
return {
value: 'value',
};
},
methods: {
hangleChange: debounce(function (e) {
console.log(this.value)
})
},
mounted() {
console.log('防抖', this.hangleChange)
},
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue中的节流</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div class="scroll" ref="previewText" @scroll.passive="fnScroll"
style="width: 300px;height: 300px;border: 4px solid red;overflow: scroll;">
sou la xi xi xi xi la xi la sou 吹着前奏望着天空 我想起花瓣试着掉落 为你翘课的那一天 花落的那一天 教室的那一间 我怎么看不见 消失的下雨天 我好想再淋一遍 没想到失去的勇气我还留着
好想再问一遍 你会等待还是离开
刮风这天我试过握着你手 但偏偏雨渐渐大到我看你不见 还要多久我才能在你身边 还要多久我才能够在你身边 等到放晴的那天也许我会比较好一点 等到放晴那天也许我会比较好一点 从前从前有个人爱你很久 但偏偏风渐渐把距离吹得好远
偏偏风渐渐把距离吹得好远
但偏偏雨渐渐把距离吹得好远 好不容易又能再多爱一天 但故事的最后你好像还是说了拜拜 但故事的最后你好像还是说了 sou la xi xi xi xi la xi la sou 吹着前奏望着天空 我想起花瓣试着掉落
为你翘课的那一天
花落的那一天 教室的那一间 我怎么看不见 消失的下雨天 我好想再淋一遍 没想到失去的勇气我还留着 好想再问一遍 你会等待还是离开 刮风这天我试过握着你手 但偏偏雨渐渐大到我看你不见 还要多久我才能在你身边
还要多久我才能够在你身边
等到放晴的那天也许我会比较好一点 等到放晴那天也许我会比较好一点 从前从前有个人爱你很久 但偏偏风渐渐把距离吹得好远 偏偏风渐渐把距离吹得好远 但偏偏雨渐渐把距离吹得好远 好不容易又能再多爱一天 但故事的最后你好像还是说了拜拜
但故事的最后你好像还是说了 sou la xi xi xi xi la xi la sou 吹着前奏望着天空 我想起花瓣试着掉落 为你翘课的那一天 花落的那一天 教室的那一间 我怎么看不见 消失的下雨天 我好想再淋一遍
没想到失去的勇气我还留着
好想再问一遍 你会等待还是离开 刮风这天我试过握着你手 但偏偏雨渐渐大到我看你不见 还要多久我才能在你身边 还要多久我才能够在你身边 等到放晴的那天也许我会比较好一点 等到放晴那天也许我会比较好一点 从前从前有个人爱你很久
但偏偏风渐渐把距离吹得好远
偏偏风渐渐把距离吹得好远 但偏偏雨渐渐把距离吹得好远 好不容易又能再多爱一天 但故事的最后你好像还是说了拜拜 但故事的最后你好像还是说了 sou la xi xi xi xi la xi la sou 吹着前奏望着天空
我想起花瓣试着掉落
为你翘课的那一天 花落的那一天 教室的那一间 我怎么看不见 消失的下雨天 我好想再淋一遍 没想到失去的勇气我还留着 好想再问一遍 你会等待还是离开 刮风这天我试过握着你手 但偏偏雨渐渐大到我看你不见 还要多久我才能在你身边
还要多久我才能够在你身边
等到放晴的那天也许我会比较好一点 等到放晴那天也许我会比较好一点 从前从前有个人爱你很久 但偏偏风渐渐把距离吹得好远 偏偏风渐渐把距离吹得好远 但偏偏雨渐渐把距离吹得好远 好不容易又能再多爱一天 但故事的最后你好像还是说了拜拜
但故事的最后你好像还是说了
</div>
</div>
</body>
<script>
let app = new Vue({
el: '#app',
data() {
return {
count: 0,
fnScroll: () => {}
}
},
methods: {
fnHandleScroll(e) {
console.log('scroll触发了：' + this.count++, new Date())
},
fnThrottle(fn, delay, atleast) { //节流函数
let timer = null;
let previous = null;
return function () {
let now = +new Date()
if (!previous) previous = now;
if (atleast && now - previous > atleast) {
fn();
previous = now;
clearTimeout(timer)
} else {
clearTimeout(timer)
timer = setTimeout(() => {
fn();
previous = null
}, delay)
}
}
}
},
created() {
this.fnScroll = this.fnThrottle(this.fnHandleScroll, 1000) //刚创建时执行
},
})
</script>
</html>
防抖：触发高频事件时，在delay时间内函数最终只会执行一次，如果在delay时间内再次触发事件，则重新计算时间；
节流：触发高频事件时，稀释函数执行的频率 (在时间内只会触发第一次)
浙公网安备 33010602011771号