本文详细解析 JavaScript 中防抖与节流函数的实现原理及手写代码。通过输入框监听和元素拖拽两个典型场景，演示如何利用定时器控制事件触发频率，从而优化系统性能并解决频繁触发导致的卡顿问题。
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 防抖和节流内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！