函數的防抖和節流

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