防抖，节流小案例

最新推荐文章于 2024-09-22 11:17:00 发布

qq_53245972

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量121

点赞数

文章标签： javascript servlet html

本文链接：https://blog.csdn.net/qq_53245972/article/details/127106411

版权

节流

固定时间之内，多次操作以首次为准，不会触发第二次及以后的

降低代码执行的频率

使用场景：无限加载

  <button id="btn">按钮</button>
    <script>
        var btn = document.getElementById('btn');

        var flag = true;
        btn.onclick = function () {
            if (flag) {
                flag = false;
                console.log('aaaa');

                setTimeout(() => {
                    flag = true;
                }, 1000);
            }
        }

   </script>

防抖

多次操作，以最后一次为准

降低代码执行频率

  <button id="btn">按钮</button>
    <script>
        // 防抖  多次操作，以最后一次为准
        // 降低代码执行频率

        var btn = document.getElementById('btn');

        var timer;
        btn.onclick = function() {
      clearTimeout(timer);  // 清除上一次点击，生成的延时器

            timer = setTimeout(() => {
                console.log(1111);
            }, 1000);
        }

防抖实例：滚动窗口

<body style="height: 5000px;"> 
    <script>
        var timer;
        window.onscroll = function() {
            clearTimeout(timer);
            timer = setTimeout(() => {
                console.log('aaaaaa');
            }, 1000);
        }
    </script>
</body>

防抖实例：输入框验证

 <!-- 监听输入框，按最后一次输入的内容，允许输入0-9 a-z A-Z  否则提示不符合要求 -->
    <input type="text" id="ipt">
    <span id="err"></span>
    <script>
       var ipt = document.getElementById('ipt');
      var err = document.getElementById('err');
      var str = 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM1234567890';
        var timer;
        ipt.oninput = function () {
            clearTimeout(timer);

            timer = setTimeout(() => {
                console.log(ipt.value);
             for (let i = 0; i < ipt.value.length; i++) {
             if (str.indexOf(ipt.value[i]) == -1) {
           err.textContent = '输入的内容不符合要求';
                        return;
                    } else {
                        err.textContent = '';
                    }

                }
            }, 1000);
        }
    </script>