前端节流防抖的简单介绍、应用场景、简单案例！！！

最新推荐文章于 2024-05-07 18:15:07 发布

眼睛里的光！

最新推荐文章于 2024-05-07 18:15:07 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/YZY010313/article/details/126817841

版权

节流防抖是很常见的手写面试题！今天就来简单介绍一下节流防抖！

首先节流防抖的应用场景有什么呢？

1、鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；

2、懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费 CPU 资源；

主要应用于：

1、DOM元素的拖拽功能实现
2、射击游戏类
3、计算鼠标移动的距离
4、监听scroll事件

节流：

节流(throttle)其实就是减少一段时间内事件的触发频率

防抖：

防抖(debounce)是当事件被触发后,延迟n秒后再执行回调函数,如果在这n秒内事件被再次触发,则重新计时

今天就用实现一个监听scroll的节流防抖的简单案例！代码如下：

<!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>
</head>
<style>
    body {
        height: 3000px;
    }
</style>

<body>
    <script>
        //防抖
        function debounce(fn, delay) {
            let timer
            return function (...args) {
                if (timer) {
                    clearTimeout(timer)
                }
                timer = setTimeout(() => {
                    fn.apply(this, args)
                }, delay)
            }
        }

        function task1() {
            console.log('防抖')
        }
        const debounceTask = debounce(task1, 1000)
        window.addEventListener("scroll", debounceTask)


        //节流
        function throttle(fn, delay) {
            let last = 0
            return function (...args) {
                const now = Date.now()
                if (now - last > delay) {
                    last = now
                    fn.apply(this, args)
                }
            }
        }

        function task() {
            console.log('节流')
        }
        const throttleTask = throttle(task  , 100)
        window.addEventListener("scroll", throttleTask)
    </script>
</body>

</html>