Vue手写防抖和节流函数代码详解
更新时间：2023年02月25日 09:49:03 作者：周兴
在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防抖和节流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue之父组件向子组件传值并改变子组件的样式,需要的朋友可以参考下2022-12-12
本篇文章主要介绍了在 React、Vue项目中使用SVG的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
本篇文章主要介绍了vue 里面使用axios 和封装的示例代码，非常具有实用价值，需要的朋友可以参考下2017-09-09
这篇文章主要给大家介绍了如何使用 Vue3 实现一个穿梭框效果,当选中数据,并且点击相对应的方向箭头时,选中的数据会发送到对面,并且数据会保持正确的顺序进行排列,文中有详细的代码讲解,具有一定的参考价值,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了Vue中的v-for循环key属性注意事项小结,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
这篇文章主要介绍了vue 清空input标签 中file的值操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要为大家详细介绍了Vue组件之事件总线和消息发布订阅，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
这篇文章主要为大家介绍了vue使用微软的开发接口Office Web,实现线上文件预览,预览word，excel，pptx，pdf文件,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
vue3已经内置了这个功能啦,可以在style中使用v-bind指令绑定script模块中的响应式变量,这篇文章我们来讲讲vue是如何实现在style中使用script模块中的响应式变量,感兴趣的朋友一起看看吧2024-07-07
这篇文章主要介绍了使用vue-aplayer插件时出现的问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
最新评论