函数的防抖和节流

1.防抖

<div id="app" style="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