1.防抖函数

1.1定义

说明：在一定时间内，频繁执行事件，只执行最后一次函数。(英雄联盟回城)

1.2步骤：

声明定时器函数
判断是否有定时器函数，如果有定时器函数的话就清除定时器。。
如果没有定时器函数的话，就开启定时器函数。
定时器函数放入执行的函数。

1.3代码

1.3.1原生JS实现

<!DOCTYPE html>
<html lang="zh">
<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>手撕防抖函数</title>
    <script src="./lodash.min.js"></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            font-size: 20px;
            line-height: 200px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
    <script>
        //   获取盒子
        const box = document.querySelector(".box")
        // 说明变量
        let i = 0
        function mouseAdd() {
            box.innerHTML = i += 1
        }
        // 防抖函数：在规定的时间，频繁点击，只执行最后一次
        function debounce1(fn, time) {
            // 声明一个定时器变量
            let timer;
            // 返回一个匿名函数
            return function () {
                // 如果有定时器那么就清除
                if (timer) clearTimeout(timer)
                // 如果没有就创建一个定时器
                timer = setTimeout(function () {
                    // 在定时器函数中执行要执行的函数
                    fn();
                }, time)
            }
        }
box.addEventListener("mousemove", debounce1(mouseAdd, 1000)

        )
    </script>
</body>
</html>

1.3.2引入第三方库lodash

<!DOCTYPE html>
<html lang="zh">
<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>手撕防抖函数</title>
    <script src="./lodash.min.js"></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            font-size: 20px;
            line-height: 200px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
    <script>
        //   获取盒子
        const box = document.querySelector(".box")
        // 说明变量
        let i = 0
        function mouseAdd() {
            box.innerHTML = i += 1
        }
      
        box.addEventListener("mousemove", _.debounce(mouseAdd, 1000)
        )
    </script>
</body>
</html>

1.3.3效果图

2.节流函数

2.1定义

说明：在一定时间内，频繁执行事件，只执行一次函数(英雄联盟中的技能冷却)

2.2步骤：

声明定时器函数,并将定时器赋值为空。
没有定时器函数，就开启定时器函数。
定时器函数放入执行的函数，并将定时器变量赋值为空。

2.3代码

2.3.1原生JS实现

<!DOCTYPE html>
<html lang="zh">
<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>手撕防抖函数</title>
    <script src="./lodash.min.js"></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            font-size: 20px;
            line-height: 200px;
            text-align: center;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
    <script>
        const box = document.querySelector(".box")
        let i = 0
        function moveAdd() {
            box.innerHTML = i += 1
        }
      //节流函数：在一定时间内，频繁执行事件，只执行一次函数。
        function throttle(fn, time) {
            let timer=null
            return function () {
                if (!timer) {
                    timer = setTimeout(function () {
                        fn();
                        timer = null
                    }, time)
                }
            }
        }
        box.addEventListener("mousemove", throttle(moveAdd, 1000))
    </script>
</body>
</html>

2.3.2引入第三方lodash库

<!DOCTYPE html>
<html lang="zh">
<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>手撕防抖函数</title>
    <script src="./lodash.min.js"></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            font-size: 20px;
            line-height: 200px;
            text-align: center;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
    <script>
        const box = document.querySelector(".box")
        let i = 0
        function moveAdd() {
            box.innerHTML = i += 1
        }
        box.addEventListener("mousemove",_.throttle(moveAdd,1000))
    </script>
</body>
</html>