js防抖和节流
web开发中经常会做滚动监听，比如商品分类功能：左右两列，左侧类目，右侧商品，需要监听右测商品列表的滚动，滚到哪个类目区间，左侧就点亮哪个类目标签。如果在滚动的过程中一直监听而不做性能优化的话，浏览器是很容易卡死的。下面提供两种优化性能的方法：
1、防抖：在滚动过程中不执行操作，只在结束滚动一段时间内不再滚动才执行，这里的一段时间可以是500毫秒也可以是1秒，视具体业务而定。
// js防抖核心代码
function debounce (fn, delay) {
let timer = null
// 闭包
return () => {
// 如果当前正处在某个计时过程中，那么就清除此次计时开始下一次计时，
// 否则不清除，直接开始下一次计时，计时满delay毫秒后才会触发fn函数。
if (timer) {
clearTimeout(timer)
}
// 开始下一次计时
timer = setTimeout(fn, delay)
}
}
function handleScroll () {
console.log('滑动后一秒钟内不再滑动我就执行一次', Math.random())
}
window.addEventListener('scroll', debounce(handleScroll, 1000))
查看演示请狠狠地点击：js防抖demo
2、节流：如果希望即节省性能又不牺牲用户体验，就仍然在滚动中实时监听，只不过降低监听的“频率”，比如1秒才执行一次。下面提供两种实现方法（时间戳、定时器）。
// js节流核心代码
// 时间戳
function throttle1 (fn, delay) {
let prev = Date.now()
// 闭包
return () => {
let now = Date.now()
if (now - prev >= delay) {
fn()
prev = Date.now()
}
}
}
// 定时器
function throttle2 (fn, delay) {
let timer = null
// 闭包
return () => {
if (!timer) {
timer = setTimeout(() => {
fn()
timer = null
}, delay)
}
}
}
function handleScroll () {
console.log('滑动过程中我一秒钟才执行一次', Math.random())
}
window.addEventListener('scroll', throttle1(handleScroll, 1000))
// window.addEventListener('scroll', throttle2(handleScroll, 1000))
查看演示请狠狠地点击：js节流demo
发表评论 (审核通过后显示评论)：