防抖和节流

最新推荐文章于 2025-02-16 15:01:53 发布

hsCBY

最新推荐文章于 2025-02-16 15:01:53 发布

阅读量169

点赞数

分类专栏：技术文章标签：防抖节流避免高频率触发事件

本文链接：https://blog.youkuaiyun.com/hsCBY/article/details/100551320

版权

技术专栏收录该内容

19 篇文章

订阅专栏

本文深入探讨了JavaScript中的防抖(debounce)和节流(throttle)技术，通过实例讲解了这两种技术的工作原理及应用场景，包括如何使用定时器和时间戳实现防抖与节流，适用于优化高频触发事件的响应效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

防抖和节流

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

<!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>
    <style>
        div {
            width: 300px;
            height: 100px;
            border: 1px solid #000;
            margin: 100px auto;
            padding: 100px;
            text-align: center
        }
    </style>
</head>

<body>
    <div id="app">
    </div>
    <script>
        var div = document.querySelector('#app')
        var num = 0
        div.innerHTML = num

        function debounce(fn, wait) {
            var timeout = null;
            return function () {

                if (timeout !== null) clearTimeout(timeout);
                timeout = setTimeout(()=>{handle()}, wait);
            }
        }
        // 处理函数
        function handle() {
            num++
            div.innerHTML = num
        }
        // 滚动事件
        div.addEventListener('mousemove', debounce(handle, 1000));
    </script>
</body>

</html>

立即执行防抖

<script>
        var div = document.querySelector('#app')
        var num = 0
        div.innerHTML = num

        function debounce(fn, wait) {
            var timeout = null;
            return function () {
                if (timeout !== null) clearTimeout(timeout);
                let flag = !timeout
                timeout = setTimeout(()=>{timeout=null}, wait);
                if(flag) {
                    handle()
                }
            }
        }
        // 处理函数
        function handle() {
            num++
            div.innerHTML = num
        }
        // 滚动事件
        div.addEventListener('mousemove', debounce(handle, 1000));
    </script>

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

<!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>
    <style>
        div {
            width: 300px;
            height: 100px;
            border: 1px solid #000;
            margin: 100px auto;
            padding: 100px;
            text-align: center
        }
    </style>
</head>

<body>
    <div id="app">
    </div>
    <script>
        var div = document.querySelector('#app')
        var num = 0
        div.innerHTML = num

        function throttle(fn, wait) {
            var timer = null
            return function () {
                if(!timer) {
                    timer = setTimeout(()=>{
                        timer = null
                        fn()
                    },wait)
                }

            }
        }
        // 处理函数
        function handle() {
            num++
            div.innerHTML = num
        }
        // 移动事件
        div.addEventListener('mousemove', throttle(handle, 1000));
    </script>
</body>

</html>

时间戳节流

 <script>
        var div = document.querySelector('#app')
        var num = 0
        div.innerHTML = num

        function throttle(fn, wait) {
            var time = 0;
            return function () {
                var now = new Date()
                if(now - time > wait) {
                    fn()
                    time = new Date()
                }
            }
        }
        // 处理函数
        function handle() {
            num++
            div.innerHTML = num
        }
        // 移动事件
        div.addEventListener('mousemove', throttle(handle, 1000));
    </script>