input 输入框防抖和节流

最新推荐文章于 2025-01-18 17:05:51 发布

慕中川梨花

最新推荐文章于 2025-01-18 17:05:51 发布

阅读量1w

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/m0_46157338/article/details/105861928

版权

本文介绍了JavaScript中的防抖(debounce)和节流(throttle)技术，特别是在input输入框场景中的应用。防抖技术用于限制函数在特定时间段内的执行，例如在用户连续输入时，确保在最后一刻才处理输入事件，避免资源浪费。而节流技术则保证在固定间隔时间内执行一次函数，即使事件频繁触发，也确保至少每10秒执行一次。两者的区别在于防抖可能导致函数不执行，而节流则始终会执行一次。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

防抖(debounce):

函数防抖一般是指对于在事件被触发n秒后再执行的回调，如果在这n秒内又重新被触发，则重新开始计时。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    用户名: <input onblur="checkUsername" placeholder="请输入用户名" id="username" />

    <script>
        var timer;
        var count = 0;
        var $username = document.getElementById('username');
        $username.addEventListener('input', function () {
            console.log(++count);
            // 每次输入就清除定时器,一直输入就一直清除,下面的console.log就永远不会触发,
            // 直到你不输入一秒后才触发 
            clearTimeout(timer);
            timer = setTimeout(function () {
                console.log('发请求到后台,检查用户是否已注册');
            }, 1000)
        }, false)
    </script>
</body>

// 上面例子中的函数,一般单独写出来,给它命名为debounce
var timer;
var count = 0;
var $username = document.getElementById("username");
$username.addEventListener("input", debounce, false);

function debounce() {
  console.log(++count);
  clearTimeout(timer);
  timer = setTimeout(function() {
    console.log("发请求到后台,检查用户是否已注册");
  }, 1000);
}

使用场景：
当你在页面中使用 onkeyUp 监听用户在 input 框中的输入，如果用户按住一个 6 不放，那监听事件岂不是一直被触发，这样就浪费了一部分性能了，那么我们在一定事件内监听，也就是说我过了一秒再来看看你输入了多少个 6

节流（throttle）：

函数节流就是函数每隔n秒执行一次

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    用户名: <input placeholder="请输入用户名" id="username" />

    <script>
        var timer;
        var count = 0;

        var $username = document.getElementById('username');
        $username.addEventListener('input', throttle(function () {
            console.log(++count);
        }), false)

        function throttle(callback) {
            // 上一次点击的时间
            let preTime = Date.now();
            return function () {
                let args = arguments;
                // 现在点击时间
                let now = Date.now();
                // 现在点击的时间跟上一次点击的时间如果超过了一秒,执行回调
                if (now - preTime >= 1000) {
                    callback(args);
                    // 从新计时,这次点击的时间成为下一次点击时间的起点
                    preTime = now;
                }
            }
        }
    </script>
</body>