防抖与节流

最新推荐文章于 2024-11-01 13:37:40 发布

Xyt1737

最新推荐文章于 2024-11-01 13:37:40 发布

阅读量153

点赞数

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

本文链接：https://blog.csdn.net/Xyt1737/article/details/120876870

版权

本文介绍了防抖与节流的概念及其在前端性能优化中的应用，通过underscore/lodash库演示了debounce和throttle函数的使用，并提供了自封装的防抖和节流函数示例，适用于scroll事件、搜索框输入、表单验证和按钮提交等场景。

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

应用场景

1. 通过使用underscore loadash等前端工具库里封装的debounce和throttle函数

防抖

节流

2. 自己封装debounce和throttle函数

防抖

节流

防抖与节流属于高级函数的内容，用来解决事件的频繁发生而导致的服务器的宕机。

应用场景

1.scroll事件滚动触发

2.搜索框输入查询

3.表单验证

4.按钮提交事件

1. 通过使用underscore loadash等前端工具库里封装的debounce和throttle函数

防抖

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container {
            height: 200px;
            background-color: rgb(41, 39, 39);
            color: #fff;
            text-align: center;
            line-height: 200px;
            font-style: 30px;
        }
    </style>
    <script src="./underscore.js"></script>
</head>

<body>
    <!-- dom容器 -->
    <div id="container"></div>
    <script>
        // 演示事件如何频繁发生
        // 获取dom容器
        let container = document.querySelector('#container');
        // 绑定事件，触发事件频繁发生
        let count = 1;
        function doSomeThing(e) {
            console.log(this); //window
            console.log(e); //undefined
            // 可能做回调或者是ajax请求
            container.innerHTML = count++;
        }
        // 事件处理函数(doSomeThing)在一定时间(1000)后才执行
        // 如果这段时间再次调用，则会重新计算时间，如果超过预定时间，则执行事件处理函数
        container.onmousemove = _.debounce(doSomeThing, 1000);
    </script>
</body>

</html>

节流

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container {
            height: 200px;
            background-color: rgb(41, 39, 39);
            color: #fff;
            text-align: center;
            line-height: 200px;
            font-style: 30px;
        }
    </style>
    <script src="./underscore.js"></script>
</head>

<body>
    <!-- dom容器 -->
    <div id="container"></div>
    <script>
        // 演示事件如何频繁发生
        // 获取dom容器
        let container = document.querySelector('#container');
        // 绑定事件，触发事件频繁发生
        let count = 1;
        function doSomeThing(e) {
            console.log(this); //window
            console.log(e); //undefined
            // 可能做回调或者是ajax请求
            container.innerHTML = count++;
        }
        container.onmousemove = _.throttle(doSomeThing, 1000);
    </script>
</body>

</html>

2. 自己封装debounce和throttle函数

防抖

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container {
            height: 200px;
            background-color: rgb(41, 39, 39);
            color: #fff;
            text-align: center;
            line-height: 200px;
            font-style: 30px;
        }
    </style>
</head>

<body>
    <!-- dom容器 -->
    <div id="container"></div>
    <script>
        // 演示事件如何频繁发生
        // 获取dom容器
        let container = document.querySelector('#container');
        // 绑定事件，触发事件频繁发生
        let count = 1;
        function doSomeThing(e) {
            console.log(this); //window
            console.log(e); //undefined
            // 可能做回调或者是ajax请求
            container.innerHTML = count++;
        }
        // 事件处理函数(doSomeThing)在一定时间(1000)后才执行
        // 如果这段时间再次调用，则会重新计算时间，如果超过预定时间，则执行事件处理函数
        container.onmousemove = debounce(doSomeThing, 1000);
        // 自己封装防抖函数
        function debounce(fun, wait) {
            let timeout;
            return function () {
                // console.log(this); dom节点
                // console.log(arguments); //mousemove{}
                let argus = arguments;
                let context = this;
                clearTimeout(timeout)
                timeout = setTimeout(function () {
                    fun.apply(context, argus);//doSomeThing
                }, wait)
            }
        }
    </script>
</body>

</html>

节流

时间戳

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container {
            height: 200px;
            background-color: rgb(41, 39, 39);
            color: #fff;
            text-align: center;
            line-height: 200px;
            font-style: 30px;
        }
    </style>
</head>

<body>
    <!-- dom容器 -->
    <div id="container"></div>
    <script>
        // 演示事件如何频繁发生
        // 获取dom容器
        let container = document.querySelector('#container');
        // 绑定事件，触发事件频繁发生
        let count = 1;
        function doSomeThing(e) {
            console.log(this); //window
            console.log(e); //undefined
            // 可能做回调或者是ajax请求
            container.innerHTML = count++;
        }
        container.onmousemove = throttle(doSomeThing, 1000);
        // 节流原理：如果持续触发事件，每隔一段时间，执行一次事件
        // 自己封装节流函数 --时间戳 超时调用
        // 时间戳
        function throttle(fun, wait) {
            // 定义一个旧的时间戳
            let old = 0;
            let context, argus;
            return function () {
                // 获取一下当前的时间戳
                let now = new Date().valueOf();
                // console.log(now);
                if (now - old > wait) {
                    // 立即执行
                    fun()
                    old = now;
                }
            }
        }

    </script>
</body>

</html>

超时调用

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container {
            height: 200px;
            background-color: rgb(41, 39, 39);
            color: #fff;
            text-align: center;
            line-height: 200px;
            font-style: 30px;
        }
    </style>
</head>

<body>
    <!-- dom容器 -->
    <div id="container"></div>
    <script>
        // 演示事件如何频繁发生
        // 获取dom容器
        let container = document.querySelector('#container');
        // 绑定事件，触发事件频繁发生
        let count = 1;
        function doSomeThing(e) {
            console.log(this); //window
            console.log(e); //undefined
            // 可能做回调或者是ajax请求
            container.innerHTML = count++;
        }
        container.onmousemove = throttle(doSomeThing, 1000);
        // 节流原理：如果持续触发事件，每隔一段时间，执行一次事件
        // 自己封装节流函数 --时间戳 超时调用
        // 超时调用
        function throttle(fun, wait) {
            let context, argus, timeout;
            return function () {
                context = this;
                argus = arguments;
                if (!timeout) {
                    timeout = setTimeout(() => {
                        fun.apply(context, argus);
                        timeout = null;
                    }, wait)
                }
            }
        }

    </script>
</body>

</html>