这篇“JavaScript防抖和节流函数代码怎么写”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“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的频率,打印坐标位置。