函数的节流防抖

1. 节流

事件在执行时, 第一次开始执行时, 在结束之前或者在指定时间之前, 无法触发下一次

除非等到第一次执行结束或者在指定时间到达后, 才可以进行下一次

2. 防抖

事件在开始执行时, 如果快速触发了第二次, 那么第二次会取代第一次, 只会执行最后一次

        const inp = document.querySelector('.inp');

        // 0. 基础版
         inp.oninput = function () {
             console.log(this.value)
         }

        // 1. 节流
         let flag = true
         inp.oninput = function () {

             if (flag === false) return

             flag = false

             setTimeout(() => {
                 flag = true
                 console.log(this.value)
             }, 300)
         }

        // 2. 扩展: 自执行函数
         function fn() {
             console.log('我是一个普通函数 fn')
         }

        /**
         *  自执行函数需要在代码最前边添加一个 分号, 用于和上一行代码起到一个分割作用
         * 
         *      自执行函数如果需要传参, 将实参书写在 第二个小括号内即可
        */
        // ;(function fn(num) {
        //     console.log('我是一个普通函数 fn', num)
        // })(99)

        // 2. 节流的优化
        // let flag = true


        inp.oninput = (function (flag) {    // 当前这个函数会立即执行, 然后返回一个 函数给到 inp.oninput

            return function () {
                // 使用 flag 的时候会先在 当前作用域找, 没找到, 然后去上层作用域(自执行函数内)找, 在这里找到了 形参 flag, 初始值为 true
                if (flag === false) return
                flag = false
                setTimeout(() => {
                    flag = true
                    console.log(this.value)
                }, 300)
            }

        })(true)
        // 3. 自执行函数
        // let timer = 0
        inp.oninput = (function (timer) {

            return function () {
                clearInterval(timer)

                timer = setTimeout(() => {
                    console.log(this.value)
                }, 300)
            }

        })(0)