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的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要和大家一起探索Vue.js component内容实现,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要介绍了手把手教学vue的路由权限问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要为大家介绍了vue3组件库Shake抖动组件搭建过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了vue中关于confirm确认框的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-08-08
这篇文章主要介绍了详解vue-router 命名路由和命名视图,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
在Vue3中使用provide和inject进行依赖注入的代码详解
在现代前端开发中,Vue.js已经成为了非常流行的框架之一,它提供了极大的灵活性和可维护性,今天我们要探讨的是Vue 3中的provide和inject功能,这是一种用于在组件树中进行依赖注入的方法,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了TypeScript中集成Tween.js踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了typescript中this报错的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。这篇文章主要给大家介绍了vue项目中使用axios上传图片等文件操作，需要的朋友参考下吧2017-11-11
最新评论