JS 防抖 和 节流

防抖

    防抖：在短时间内快速的触发一件事，每次都用新的事件替代上一次，
    也就是说那么我们只会执行最后一次触发的事件
    
    短时间内快速触达一件事，只会执行最后一次

代码演示

    <input type="text" id="inp"> 
    <script>
        const inp = document.querySelector('#inp')

        inp.oninput = ((timeId) => {
            return () => {
                clearInterval(timeId)
                timeId = setTimeout(() => {
                    console.log(inp.value)
                },300)
            }
        })(0)

    </script>

节流

    在短时间内快速触发一件事，当一件事处理函数开始执行的时候，在此期间，不允许重复

    <input type="text" id="inp">
    <script>
        const inp = document.querySelector('#inp')

        inp.oninput = ((flag) => {
            return () => {
                if(!flag) return
                flag = false
                setTimeout(() => {
                    console.log(inp.value)
                    flag = true
                },300)
            }
        })(true)
    </script>