场景(频繁触发事件)
页面滚动条scroll事件,网页窗口resize事件,
鼠标拖动move事件,按钮频繁点击click事件,
input 快速输入事件......
防抖
当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。

箭头函数写法:
function debounce(func, delay) {
var timer = 0
return function(e) {
clearTimeout(timer)
timer = setTimeout(() => {
func(e)
}, delay)
}
}
apply 改变 this 写法:
function debounce(func, delay) {
var timer
return function(e) {
// console.log('timer', timer, e.target.value)
clearTimeout(timer)
var that = this
var args = arguments
timer = setTimeout(function(){
func.apply(that, args);
},delay)
}
}
demo
1. 输入框:
var validate = debounce(function(e) {
console.log('--调接口--', e.target.value)
}, 1000)
document.querySelector("input").addEventListener('input', validate)
2. 滚动条:
function showTop () {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop
console.log(scrollTop)
}
window.onscroll = debounce(showTop, 1000)
节流
当持续触发事件时,保证一定时间段内只调用一次事件处理函数。

function throttling(fn, delay){
let timer
return function () {
if (!timer) {
timer = setTimeout(() => {
fn()
clearTimeout(timer)
timer = null
}, delay)
}
}
}
本文探讨了JavaScript中常见的页面事件,如滚动、窗口resize、鼠标move和按钮点击等,以及这些事件可能导致的性能问题。为了提高性能,介绍了防抖(debounce)和节流(throttling)两种策略。防抖技术确保在一段时间内不再触发事件后才执行处理函数,而节流则保证在设定的时间间隔内只调用一次函数。文章提供了箭头函数和使用apply改变this的防抖实现,以及节流的实现方法,并通过输入框和滚动条的示例展示了如何应用这些优化技巧。
738

被折叠的 条评论
为什么被折叠?



