页面函数防抖和节流的区别

最新推荐文章于 2024-08-21 15:43:48 发布

yy_huang

最新推荐文章于 2024-08-21 15:43:48 发布

阅读量919

点赞数 4

分类专栏：防抖和节流文章标签： javascript html

本文链接：https://blog.csdn.net/yy_huang/article/details/107930918

版权

防抖和节流专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文探讨JavaScript中页面函数的防抖与节流技术，通过示例代码详细阐述两者之间的区别和应用场景，帮助理解这两种优化手段如何提高性能。

摘要由CSDN通过智能技术生成

页面函数防抖和节流的区别

直接上代码，注释防抖和节流之间的区别和差异

<!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>防抖和节流</title>
</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;
        const content = document.getElementById('content');

        function count() {
            content.innerHTML = num++;
        };
        // content.onmousemove = count;


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

        // 防抖函数分为非立即执行版和立即执行版

        // 非立即执行
        function debounce(func, wait) {
            let timeout;
            return function () {
                //this和参数传递 获取this 目的是为了让debounce函数最终返回的函数This指向不变
                const context = this
                //获取参数args 目的是依旧能接收到e参数
                const args = [...arguments] //MouseEvent事件
                if (timeout) clearTimeout(timeout)
                timeout = setTimeout(() => {
                    func.apply(context, args)
                }, wait)
            }
        }
        // content.onmousemove = debounce(count, 1000)

        // 立即执行 触发事件后函数会立即执行，然后n秒内不触发事件才能继续执行函数
        function debounce(func, wait) {
            let timeout
            return function () {
                const context = this
                const args = [...arguments]
                if (timeout) clearTimeout(timeout)
                const callNow = !timeout
                timeout = setTimeout(() => {
                    timeout = null
                }, wait)
                if (callNow) func.apply(context, args)
            }
        }

        // 防抖函数 立即执行和非立即执行双剑合璧
        /**
         * @desc 函数防抖
         * @param func 函数
         * @param wait 延迟执行毫秒数
         * @param immediate true 表立即执行，false 表非立即执行
         */
        function debounce(func, wait, immediate) {
            let timeout;
            return function () {
                const context = this;
                const args = [...arguments];
                if (timeout) clearTimeout(timeout);
                if (immediate) {
                    const callNow = !timeout;
                    timeout = setTimeout(() => {
                        timeout = null;
                    }, wait)
                    if (callNow) func.apply(context, args)
                } else {
                    timeout = setTimeout(() => {
                        func.apply(context, args)
                    }, wait);
                }
            }
        }

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

        // 在持续触发事件的过程中，函数不会立即执行，并且每1s执行一次，在停止触发事件后，函数还会在执行一次

        // 时间戳版 在时间段内开始的时候
        function throttle(func, wait) {
            var 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 throttle(func, wait) {
            let timeout
            return function () {
                let context = this
                let args = [...arguments]
                if (!timeout) {
                    timeout = setTimeout(() => {
                        timeout = null
                        func.apply(context, args)
                    }, wait)
                }
            }
        }

        // 节流双剑合璧
        /**
         * @desc 函数节流
         * @param func 函数
         * @param wait 延迟执行毫秒数
         * @param type 1 表时间戳版，2 表定时器版
         */
        function throttle(func, wait, type) {
            if (type === 1) {
                let previous = 0;
            } else if (type === 2) {
                let timeout;
            }
            return function () {
                let context = this;
                let args = arguments;
                if (type === 1) {
                    let now = Date.now();

                    if (now - previous > wait) {
                        func.apply(context, args);
                        previous = now;
                    }
                } else if (type === 2) {
                    if (!timeout) {
                        timeout = setTimeout(() => {
                            timeout = null;
                            func.apply(context, args)
                        }, wait)
                    }
                }

            }
        }
    </script>

</body>

</html>