节流与防抖

最新推荐文章于 2024-08-24 12:37:57 发布

旧友前度丶

最新推荐文章于 2024-08-24 12:37:57 发布

阅读量71

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/wangyangzxc123/article/details/127103788

版权

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

摘要由CSDN通过智能技术生成

<!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>