防抖和节流

防抖和节流作用相同,区别不大,都是减少事件的触发次数

防抖(debounce)

多次连续触发事件时,间隔时间太短的,就取消上一次事件的触发

function debounce(func, wait) {
            let timeout;
            return (...args) =>{
                if(timeout) clearTimeout(timeout);
                timeout = setTimeout(()=>{
                    func.apply(this,args);
                },wait)
            }
        }
        var count = 0;
        document.body.onmousemove = debounce(
        function(){
            console.log(count ++);
        },100)

节流(throttle)

多次连续触发事件,规定时间间隔内只能成功触发一次函数

function throttle(func, wait) {
            let status = true;
            return (...args) => {
                if (status) {
                    status = false;
                    func.apply(this, args);
                    setTimeout(() => {
                        status = true;
                    }, wait);
                }
            }
        }
        var count = 0;
        document.body.onmousemove = throttle(
            function () {
                console.log(count++);
            }, 100)

你可能感兴趣的:(防抖和节流)