前端开发中的输入框的防抖和节流

最新推荐文章于 2024-01-16 18:00:48 发布

上天注定的姻缘最大嘛！

最新推荐文章于 2024-01-16 18:00:48 发布

阅读量641

点赞数

分类专栏：前端 js 文章标签： javascript html

本文链接：https://blog.csdn.net/qq_38876038/article/details/110163526

版权

前端同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

16 篇文章 0 订阅

订阅专栏

前端开发中的输入框的防抖和节流

//防抖
<!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>
// 节流
用户名: <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>

上天注定的姻缘最大嘛！

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端开发中的输入框的防抖和节流

前端开发中的输入框的防抖和节流//防抖<!DOCTYPE html><head> <meta charset="UTF-8"></head><body> 用户名: <input onblur="checkUsername" placeholder="请输入用户名" id="username" /> <script> var timer; var count
复制链接

扫一扫