JS之防抖(debounce)和节流(throttle)


        function debounce(fn, time) {
            let timer = null;
            return function (...args) {
                let ctx = this;
                clearTimeout(timer);
                timer = setTimeout(function () {
                    fn.apply(ctx, args);
                    timer = null;
                }, time);
            }
        }

        function testDebounce(event){
            console.log(this);
            console.log(event.type);
            console.log(`debounce ${new Date}`);
        }

        document.body.addEventListener('mousemove', debounce(testDebounce, 300))

        function throttle(fn, time){
            let timer = null;

            return function(...args){
                let ctx = this;
                if(!timer){
                    timer = setTimeout(function(){
                        fn.apply(ctx, args);
                        timer = null;
                    }, time);
                }
            }
        }
        function testThrottle(event){
            console.log(this);
            console.log(event.type);
            console.log(`throttle ${new Date}`);
        }

        document.addEventListener('mousemove', throttle(testThrottle, 1000).bind({event:"document"}))