js中的防抖和节流

最新推荐文章于 2024-05-01 08:19:11 发布

rain19982016

最新推荐文章于 2024-05-01 08:19:11 发布

阅读量1.4k

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/rain19982016/article/details/123409097

版权

防抖

防抖：在一段时间内允许多次触发函数，但是只在最后一次有效（执行）
做法：
每次触发函数清除掉原来的定时器，重新开始计时。
如果在规定时间内不再触发函数，则执行，否则，清除掉之前的定时器，重新计时。


    <!-- 防抖：防抖和节流不同点在于，函数在一段时间内可以多次调用，尽仅在最后一次调用有效 -->
    <!-- 每一次的点击都要清除掉之前的定时器，重新定时 -->
    <input type="text">
    <button>提交</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', debounce(submit, 2000));
        function submit() {
            console.log('点击了');
        }
        //   为submit函数添加防抖
        function debounce(func, delay) {
            var timeout;
            return function () {
                clearTimeout(timeout);
                timeout = setTimeout(() => {
                    func.apply(this, arguments);
                }, delay)
            }
        }
    </script>
</body>

节流

节流：在一段时间内，只能触发一次函数。
做法：触发函数时判断是否到达了指定时间，如果到达了指定时间，执行；否则不执行弹出警告

时间戳法


    <input type="text">
    <button>提交</button>
    <script>
          var btn = document.querySelector('button');
        btn.addEventListener('click', throttle(submit, 2000));
         function thorttle(func,delay){ //传入需要节流的函数，延迟时间
            var last = 0; // 上一次触发的时间
            return function(){
                var now = Date.now(); //获取当前时间
                if(now >= delay + last){
                    //当前时间已经符合再次触发条件了
                    func(this,arguments);
                    // console.log(this);  //this指向window
                    last = now; //当前的时间就变为了上次的
                }else{
                    console.log('时间未到');
                }
            }
        }
    </script>

定时器法

<body>
    <input type="text">
    <button>提交</button>
    <script>
          var btn = document.querySelector('button');
        btn.addEventListener('click', throttle(submit, 2000));
        function thorttle(func, delay) {
            //设置一个空的定时器
            var timer = null;
            return function () {
                if (!timer) {
                    // 如果定时间为空，执行操作
                    func.apply(this, arguments);
                    // 设置定时器，并且在delays后定时器变为空时，可再次操作
                    timer = setTimeout(() => {
                        timer = null;
                    }, delay);
                } else {
                    console.log('时间未到');
                }
            }
        }
    </script>