防抖and节流

防抖（debounce）

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

lodash实现防抖

<div class="box"></div>
    <script src="./lodash.min.js"></script>
    <script>
        // 利用防抖实现性能优化
        // 需求：鼠标在盒子上移动，里面的数字就会变化 +1
        const box = document.querySelector('.box')
        let i = 1
        function mouseMove() {
            box.innerHTML = i++
            // 如果里面存在大量消耗性能的代码，比如dom操作，比如数据处理，可能造成卡顿
        }
        // 添加事件
        // box.addEventListener('mousemove', mouseMove)

        // 利用lodash库实现防抖 - 鼠标停住500毫秒之后采取+1
        // 语法：_.debounce(fun, 时间)
        box.addEventListener('mousemove', _.debounce(mouseMove, 500))
    </script>

手写代码实现防抖

<div class="box"></div>
<script src="./lodash.min.js"></script>
<script>
    // 利用防抖实现性能优化
    // 需求：鼠标在盒子上移动，里面的数字就会变化 +1
    const box = document.querySelector('.box')
    let i = 1
    function mouseMove() {
        box.innerHTML = i++
        // 如果里面存在大量消耗性能的代码，比如dom操作，比如数据处理，可能造成卡顿
    }
    // 添加事件
    // box.addEventListener('mousemove', mouseMove)

    // 手写防抖函数
    // 核心是利用 setTimeout 定时器来实现
    // 1. 声明定时器变量
    // 2. 每次鼠标移动（事件触发）的时候都要先判断是否由定时器，如果有先清除以前的定时器
    // 3. 如果没有定时器，则开启定时器，存入到定时器变量里面
    // 4. 定时器里面写函数调用
    // 使用到了闭包
    function debounce(fn, t) {
        let timer
        console.log(111);
        // return 返回一个匿名函数
        return function() {
            // 写业务逻辑 2 3 4步
            if(timer) clearTimeout(timer)
            // console.log(this)
            timer = setTimeout(function() {
                fn()
            }, t)
        }
    }
    box.addEventListener('mousemove', debounce(mouseMove, 500))
    // debounce(mouseMove, 500) // 调用函数
    // debounce(mouseMove, 500) = function() { 2 3 4步 }

</script>

节流（throttle）

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数

lodash实现节流

<div class="box"></div>
    <script src="./lodash.min.js"></script>
    <script>
        // 利用防抖实现性能优化
        // 需求：鼠标在盒子上移动，里面的数字就会变化 +1
        const box = document.querySelector('.box')
        let i = 1
        function mouseMove() {
            box.innerHTML = i++
            // 如果里面存在大量消耗性能的代码，比如dom操作，比如数据处理，可能造成卡顿
        }
        // 添加事件
        // box.addEventListener('mousemove', mouseMove)

        // 利用lodash库实现节流 - 500毫秒之后采取+1
        // 语法：_.throttle(fun, 时间)
        box.addEventListener('mousemove', _.throttle(mouseMove, 500))
    </script>

手写代码实现节流

<div class="box"></div>
<script src="./lodash.min.js"></script>
<script>
    // 利用防抖实现性能优化
    // 需求：鼠标在盒子上移动，里面的数字就会变化 +1
    const box = document.querySelector('.box')
    let i = 1
    function mouseMove() {
        box.innerHTML = i++
        // 如果里面存在大量消耗性能的代码，比如dom操作，比如数据处理，可能造成卡顿
    }
    // 添加事件
    // box.addEventListener('mousemove', mouseMove)

    // 利用lodash库实现节流 - 500毫秒之后采取+1
    // 语法：_.throttle(fun, 时间)
    // box.addEventListener('mousemove', _.throttle(mouseMove, 500))

    // 手写一个截留函数 - 每隔 500ms +1
    // 节流的核心就是利用定时器(setTimeout) 来实现
    // 1. 声明一个定时器变量
    // 2. 当鼠标每次滑动都先判断是否有定时器了，如果有定时器则不开启新的定时器
    // 3. 如果没有定时器则开启定时器，记得存到变量里面
     // 3.1 定时器里面调用执行的函数
     // 3.2 定时器里面要把定时器清空
     function throttle(fn, t) {
        let timer = null
        return function() {
            if(!timer) {
                timer = setTimeout(function() {
                    fn()
                    // 清空定时器
                    // clearTimeout(timer) // 不可使用
                    // 在 setTimeout 中是无法删除定时器的，因为定时器还在运作
                    timer = null
                }, t);
            }
        }
     } 
     box.addEventListener('mousemove', throttle(mouseMove, 500))
</script>