throttle

113 阅读1分钟
    var count = 1;
    var container = document.getElementById("container");

    function getUserAction(e) {
        container.innerHTML = count ++;
        console.log(this);
        console.log(e);
        return count;
    }

    //1.x
    // function throttle(func, wait) {
    //     var previous = 0;
    //     return function() {
    //         var args = arguments;
    //         var now = +new Date();
    //         if(now - previous > wait) {
    //             func.apply(this, args);
    //             previous = now;
    //         }
    //     };
    // }

    //2.x
    // function throttle(func, wait) {
    //     var timeout;
    //     return function() {
    //         var args = arguments;
    //         if(!timeout) {
    //             timeout = setTimeout(() => {
    //                 func.apply(this, args)
    //                 timeout = null;
    //             }, wait);
    //         }
    //     };
    // }

    //3.x
    // function throttle(func, wait) {
    //     var previous = 0;
    //     var timeout;

    //     return function() {
    //         var args = arguments;
    //         var now = +new Date();
    //         var remaining = wait - (now - previous);

    //         if(remaining <=0 || remaining > wait) {
    //             if(timeout) {
    //                 clearTimeout(timeout);
    //                 timeout = null;
    //             }
    //             previous = now;
    //             func.apply(this, args);
    //         }else if(!timeout){
    //             timeout = setTimeout(() => {
    //                 func.apply(this, args);
    //                 timeout = null;
    //                 previous = +new Date();
    //             }, remaining);
    //         }
    //     };
    // }

    // container.onmousemove = throttle(getUserAction, 3000);

    //4.x
    //options:
    //leading: false : disable the first action
    //tailing: false : disable the last action
    function throttle(func, wait, options) {
        var timeout;
        var previous = 0;
        var ops = options || {};

        var throttled = function() {
            var args = arguments;
            var now = +new Date();
            if(!previous && !ops.leading) {
                previous = now;
            }

            var remaining = wait - (now - previous);
            if(remaining <=0 || remaining > wait) {
                if(timeout) {
                    clearTimeout(timeout);
                    timeout = null;
                }
                previous = now;
                func.apply(this, args);
            }else if(!timeout && ops.trailing) {
                timeout = setTimeout(() => {
                    func.apply(this, args);
                    timeout = null;
                    previous = +new Date();
                }, remaining);
            }
        };

        throttled.cancel = function() {
            clearTimeout(timeout);
            previous = 0;
            timeout = null;
        }

        return throttled;
    }