防抖和节流

最新推荐文章于 2024-04-07 11:56:57 发布

zxx的Opera

最新推荐文章于 2024-04-07 11:56:57 发布

阅读量81

点赞数

本文链接：https://blog.csdn.net/Kungirl/article/details/108535594

版权

解决：表单提交

事件持续触发的过程中那么频繁地去执行函数。

一、防抖

一、概念：

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

二、分类

1、非立即执行版

触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

2、立即执行版

触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果

3、两版结合

非立即执行版+立即执行版

所有代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
    <div id="content"
        style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;">
    </div>
    <script>
        /*
        解决：表单提交
        事件持续触发的过程中那么频繁地去执行函数。
        */ 

        /*
        防抖就是 我第一次点击就执行定时器 我第二次点击 看见定时器再执行
        我就取消定时器 再重新执行一个新的 
        所有我不停的点 就不停的取消定时器 始终只有最后一个定时器 
        */
        let num = 1;
        let content = document.getElementById('content');

        function count() {
            content.innerHTML = num++;
        };
        /* 
        防抖（debounce）
        所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
        */

        //非立即执行版
        //触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
        function debounce(func, wait) {
            let timeout;
            return function () {
                /*
                获取 this 和 参数，是为了让 debounce 函数最终返回的函数 this 指向不变以及依旧能接受到 e 参数
                */
                let context = this;
                let args = arguments;

                if (timeout) clearTimeout(timeout);

                timeout = setTimeout(() => {
                    func.apply(context, args)
                }, wait);
            }
        }

        // 立即执行版
        // 触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果。

        function debounce2(func, wait) {
            let timeout;
            return function () {
                let context = this;
                let args = arguments;

                if (timeout) clearTimeout(timeout);

                let callNow = !timeout;
                timeout = setTimeout(() => {
                    timeout = null;
                }, wait)

                if (callNow) func.apply(context, args)
            }
        }

        /**Double版本
         * @desc 函数防抖
         * @param func 函数
         * @param wait 延迟执行毫秒数
         * @param immediate true 表立即执行，false 表非立即执行
        */
        function debounce3(func, wait, immediate) {
            let timeout;

            return function () {
                let context = this;
                let args = arguments;

                if (timeout) clearTimeout(timeout);
                if (immediate) {
                    var callNow = !timeout;
                    timeout = setTimeout(() => {
                        timeout = null;
                    }, wait)
                    if (callNow) func.apply(context, args)
                }
                else {
                    timeout = setTimeout(function () {
                        func.apply(context, args)
                    }, wait);
                }
            }
        }
        // content.onmousemove = count;
        // content.onmousemove = debounce(count, 3000);
        // content.onmousemove = debounce2(count, 3000);
        content.onmousemove = debounce3(count, 3000,false);


    </script>
</body>

</html>

二、节流

一、概念：

就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

二、分类

1、时间戳版

2、定时器版本

区别：

时间戳版的函数触发是在时间段内开始的时候，

而定时器版的函数触发是在时间段内结束的时候。

所有代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
    <div id="content"
        style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;">
    </div>
    <script>
        // 所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

        // 时间戳版
        let num = 1;
        let content = document.getElementById('content');

        function count() {
            content.innerHTML = num++;
        };
        function throttle(func, wait) {
            let previous = 0;
            return function () {
                let now = Date.now();
                let context = this;
                let args = arguments;
                if (now - previous > wait) {
                    func.apply(context, args);
                    previous = now;
                }
            }
        }
        content.onmousemove = throttle(count, 1000);

        // 定时器版本
        function throttle2(func, wait) {
            let timeout;
            return function () {
                let context = this;
                let args = arguments;
                if (!timeout) {
                    timeout = setTimeout(() => {
                        timeout = null;
                        func.apply(context, args)
                    }, wait)
                }

            }
        }
        content.onmousemove = throttle2(count, 1000);
        /*

        区别：
          时间戳版的函数触发是在时间段内开始的时候，
          而定时器版的函数触发是在时间段内结束的时候。
        */

    </script>
</body>

</html>

原文链接：https://www.jianshu.com/p/c8b86b09daf0

zxx的Opera

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
防抖和节流

解决：表单提交事件持续触发的过程中那么频繁地去执行函数。一、防抖一、概念：所谓防抖，就是指触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。二、分类1、非立即执行版触发事件后函数不会立即执行，而是在n秒后执行，如果在n秒内又触发了事件，则会重新计算函数执行时间。2、立即执行版触发事件后函数会立即执行，然后n秒内不触发事件才能继续执行函数的效果3、两版结合非立即执行版+立即执行版所有代码如下：...
复制链接

扫一扫