函数的防抖和节流

我没那么帅 发表于:2019-10-24 14:50 阅读: 102次

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

酷码派 [KuMaPai.COM] - 陕ICP备18010024号-2