1. Anti-shake function

1.1 Definition

Description: Within a certain period of time, events are executed frequently, and only the last function is executed. (League of Legends back to town)

1.2 Steps:

Declare the timer function
Determine whether there is a timer function, and if there is a timer function, clear the timer. .
If there is no timer function, start the timer function.
The timer function is put into the executed function.

1.3 Code

1.3.1 Native JS implementation

<!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 Introducing the third-party library 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 Effect drawing

2. Throttle function

2.1 Definition

Description: Within a certain period of time, execute events frequently and only execute the function once (skill cooling in League of Legends)

2.2 Steps:

Declare the timer function, and assign the timer to empty.
If there is no timer function, start the timer function.
The timer function is put into the executed function, and the timer variable is assigned to be empty.

2.3 Code

2.3.1 Native JS implementation

<!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 Introducing a third-party lodash library

<!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>

Hand tearing anti-shake function and throttling function in JS