节流与防抖

最新推荐文章于 2025-12-03 13:04:04 发布

原创最新推荐文章于 2025-12-03 13:04:04 发布 · 115 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

本文介绍了前端开发中两种重要的优化技术——防抖(debounce)和节流(throttle)。防抖常用于限制输入事件的频繁触发，避免在用户快速输入时浪费资源，例如搜索框的查询请求。而节流则确保在特定时间内匀速执行事件，适用于窗口滚动时的图片懒加载等场景。通过示例代码展示了如何实现防抖和节流效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        防抖<input type="text" id="input" value="">
        节流<input type="text" id="inp" value="">
    </div>
</body>
<script>
    // 只会执行最后一次
    let obj = document.getElementById('input')
    let times = 0
    obj.addEventListener('keyup', function() {
        clearTimeout(times)
        times = setTimeout(() =>{
            console.log('执行防抖' + obj.value)
        }, 1000)
    })

    // 每一段时间都会执行一次
    let inp = document.getElementById('inp')
    let flag = true
    inp.addEventListener('keyup', function() {
        if(!flag) {
            return
        } else if(flag) {
             flag = false
             setTimeout(() => {
                 flag = true
                 console.log('执行节流' + inp.value)
             }, 1000)
         }
    })
</script>
</html>