首先浅谈的是防抖和节流的区别:
防抖:
1.假设持续触发事件,在规定的时间内没有再次触发该事件,才会执行一次。如果它在规定的时间内再次触发了事件,时间就会重新计算,直到在规定的时间内没有触发该事件,才会执行。
节流:
1.在规定时间内只能执行一次,假如规定的时间是2秒,无论两秒内触发多少次事件,2秒内只能执行一次,4秒内执行两次
效果图:
看了gif,是不是觉得又更加的清晰了它们之间的区别呀
common.js
/**
* 防抖函数
*/
export function debounce(fn, delay = 500) {
let timer = null;
return function() {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, arguments);
}, delay);
};
}
/**
* 节流函数
*/
export function throttle(fn, delay = 500) {
let timer = true;
return function() {
if (!timer) return
timer = false
setTimeout(() => {
fn.apply(this, arguments)
timer = true
}, delay);
}
}
组件代码:
<template>
<div class="container">
<h1>不经过任何处理</h1>
<el-input @input="test" v-model="testInput"></el-input>
<p>普通内容:{{setInput}}</p>
<hr >
<h1>防抖测试</h1>
<el-input @input="testDebounce" v-model="testInputDebounce"></el-input>
<p>防抖内容:{{setDebounce}}</p>
<hr >
<h1>节流测试</h1>
<el-input @input="testThrottle" v-model="testInputThrottle"></el-input>
<p>节流内容:{{setThrottle}}</p>
<hr >
</div>
</template>
<script>
import {
debounce,
throttle
} from '../utils/common.js'
export default {
data() {
return {
testInput: '',
setInput: '',
testInputDebounce: '',
setDebounce:'',
testInputThrottle: '',
setThrottle:'',
}
},
methods: {
test() {
this.setInput = this.testInput
},
// 防抖函数使用
testDebounce: debounce(function() {
this.setDebounce = this.testInputDebounce
}),
// 节流函数使用
testThrottle: throttle(function() {
this.setThrottle = this.testInputThrottle
}, 1000)
},
created() {}
}
</script>
<style>
.container {
background-color: white;
width: 100%;
height: 100%;
padding: 20px;
}
</style>