js防抖和节流

在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。

一、防抖

        // 防抖：短时间连续触发时，时间期限内函数只执行一次（常用场景：滚动加载）
        /**
         * 1.不立即执行
         * 2.短时间连续触发不执行
        */
        function debounce(func, ms = 1000) {
            let timer;
            return function (...args) {
                if (timer) {
                    clearTimeout(timer)
                }
                // 执行的是最后一次
                timer = setTimeout(() => {
                    func.apply(this, args)
                }, ms)
            }
        }
        // 测试
        const task = () => { console.log('run task') }
        const debounceTask = debounce(task, 1000)
        window.addEventListener('scroll', debounceTask)

 

二、节流

        // 节流：时间期限内函数只会执行一次（常用场景：防重复点击）
        function throttle(func, ms = 1000) {
            let canRun = true
            return function (...args) {
                if (!canRun) return
                canRun = false
                // 执行的是第一次
                setTimeout(() => {
                    func.apply(this, args)
                    canRun = true
                }, ms)
            }
        }

        // 测试
        const task = () => { console.log('run task') }
        const throttleTask = throttle(task, 1000)
        window.addEventListener('scroll', throttleTask)