Vue手写防抖和节流函数代码详解
作者：周兴
在Vue中函数的防抖和节流不是什么新鲜话题,这篇文章主要给大家介绍了关于Vue3中防抖/节流的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
1. 手写防抖debounce
首先介绍一个防抖的应用场景。假如需要监听一个输入框在输入文字后触发的change事件，那么通过keyup事件，每次输入文字后都会触发change事件，频繁触发的情况会影响系统的性能。因此可以使用防抖来降低触发频率，即在用户输入结束或暂停时，才会触发change事件。
<script>
const input1 = document.getElementById('input1')
// 封装的防抖函数
function debounce(fn, delay = 500){
let timer = null
return function(){
if(timer){
clearTimeout(timer)
}
timer = setTimeout(()=>{
fn.apply(this, arguments)
timer = null
}, delay)
}
}
// 调用防抖函数
input1.addEventListener('keyup', debounce(function(){
console.log(input1.value)
}, 1000))
</script>在输入框中输入内容后 1s 才会触发事件监听里面的打印功能。
2. 手写节流throttle
与防抖在一段时间之后触发事件不同，节流会以固定频率触发事件。下面介绍一个节流的应用场景，假如在拖拽一个元素时，需要随时拿到该元素当前被拖拽到的位置，如果直接使用drag事件，那么会频繁触发该事件，很容易卡顿。此时可以使用节流，即无论拖拽速度有多快，都可以设置固定的频率触发。
<body>
<div id="div1" draggable="true">可拖拽</div>
<script>
const div1 = document.getElementById('div1')
// 封装节流函数
function throttle(fn, delay = 500){
let timer = null
return function(){
if(timer){
return
}
timer = setTimeout(()=>{
fn.apply(this, arguments)
timer = null
}, delay)
}
}
// 在事件监听里面调用节流函数
div1.addEventListener('drag', throttle(function(e){
console.log(e.offsetX, e.offsetY)
}, 1000))
</script>
</body>
随着元素被拖拽，本来应该迅速触发拖拽事件打印元素的坐标位置，然而使用节流将打印元素位置的函数封装之后，就会以每隔1000ms的频率，打印坐标位置。
到此这篇关于JavaScript手写防抖和节流函数代码详解的文章就介绍到这了,更多相关JS防抖和节流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！