函數的防抖和節流

1.防抖

<div id="app" style="width:400px;height:400px;border:1px solid red;"></div>

// 滑鼠在app元素裡面移動 滑鼠停止後一秒鐘在執行函數 防抖: 事件在設定事件後執行一次，滑鼠不停止不執行
        // 可以 滑鼠一直移動 看效果
        let app = document.getElementById('app')
        let timer = null
        app.onmousemove = function () {
            if (timer) {
                clearTimeout(timer)  
            }
            timer = setTimeout(() => {
                console.log('防抖函數：滑鼠停止移動後一秒鐘執行，只執行一次，滑鼠一直移動就不會執行') 
　　　　　　　　　　// 等待滑鼠 停止移動1秒鐘後在執行
                
            }, 1000)
        }

2.節流

// 節流： 事件 每隔多長事件 執行一次 視窗尺寸一直在改變不停止 隔一秒鐘也會執行節流函數
        // 可以 一直改變視窗尺寸 看效果
        let canrun = true
        window.addEventListener('resize', () => {
            if (canrun == false) return
            canrun = false
            setTimeout(() => {
                canrun = true
                // 執行的代碼塊
                console.log('節流函數：視窗尺寸改變，每隔一秒鐘執行一次節流函數，視窗一直在改變，也會執行')
            }, 1000)
        })

3.原文鏈接：https://blog.csdn.net/qq_43624878/article/details/102645669#commentBox