zoukankan      html  css  js  c++  java
  • Javascript--防抖与节流

    1.防抖

    多用于搜索框输入即时发送请求频率控制,可以实现输入停顿指定时间后发送网络请求的功能,无操作n秒后发送请求,遵循的规则是先等待,后执行。

    2.节流

    多用于解决下拉加载等操作时防止重复操作的需求,第一次操作立即执行,等待n秒后才会继续执行新的操作(等待时间内的操作被忽略),遵循的规则是先执行,后等待。

    <!-- 
        防抖 触发后在n秒只执行一次,n秒内再次触发则重新计算
        节流:连续发生的事件n秒只执行一次
    -->
    <html>
    
    <head>
        <title>防抖与节流·</title>
        <style>
            #countent {
                font-size: 60px;
                text-align: center;
                height: 200px;
                 100%;
                background-color: aquamarine;
            }
        </style>
    </head>
    
    <body>
        <div id="countent">0</div>
        <script>
            let num = 0;
            let countent = document.getElementById('countent');
    
            function count() {
                num++;
                countent.innerText = num;
            }
    
            //防抖:输入后停顿一秒再执行
            function waitTo(func, wait) {
                let timeout;
                return function() {
                    //每次触发清除上一个计时器
                    clearTimeout(timeout);
                    //重新开始计时器
                    timeout = setTimeout(function() {
                        //只有计时器维持1s以上没被清除才能执行
                        func.apply(this);
                    }, wait);
    
                }
            }
    
            //countent.onmousemove = waitTo(count, 500);
    
            //节流 输入完毕立即执行,2s后才能触发
            //1.计时器实现
            function noWait(func, wait) {
                let timeout = null; //设置初始值
                return function() {//闭包:能够读取其他函数内部变量的函数
                    if (!timeout) {
                        func.apply(this);
                        timeout = setTimeout(function() {
                            timeout = null;
                            clearTimeout(timeout);
                        }, wait);
                    }
                }
            }
            //2.时间戳实现
            // function noWait(func, wait) {
            //     let pre = 0;
            //     return function() {
            //         let now = Date.now();
            //         if (now - pre > wait) {
            //             func.apply(this);
            //             pre = now;
            //         }
            //     }
            // }
            countent.onmousemove = noWait(count, 1500);
        </script>
    </body>
    
    </html>
  • 相关阅读:
    解决网页元素无法定位的几种方法
    转载:pycharm最新版新建工程没导入本地包问题:module 'selenium.webdriver' has no attribute 'Firefox'
    关于list的漏删
    春风十里不如你
    记我兵荒马乱的一周(0808-0812)--用户反馈及修改点验证
    vue定时器
    业务系统多机房多活实现思路
    分布式开发之:id生成器
    关于部署系统的一些思考
    web系统认证与鉴权中的一些问题
  • 原文地址:https://www.cnblogs.com/aeipyuan/p/12638624.html
Copyright © 2011-2022 走看看