首页 / js教程

    JS的函数节流使用

    类型:原创      发布者:php中世界最好的语言2018-03-13 17:25:27

    这次给大家带来JS的函数节流使用,JS函数节流使用的注意事项有哪些,下面就是实战案例,一起来看一下。

    函数节流(throttle)

    函数节流就是预定一个函数只有在大于等于执行周期时才执行,周期内调用不执行。好像水滴攒到一定重量才会落下一样。

    场景:

    窗口调整(resize)

    页面滚动(scroll)

    抢购疯狂点击(mousedown)

    实现:

    function throttle(method, delay){    var last = 0;    return function (){        var now = +new Date();        if(now - last > delay){
                method.apply(this,arguments);
                last = now;
            }
        }
    }document.getElementById('throttle').onclick = throttle(function(){console.log('click')},2000);

    underscore实现:

    _.throttle = function(func, wait, options) {    var context, args, result;    var timeout = null;    var previous = 0;    if (!options) options = {};    var later = function() {
            previous = options.leading === false ? 0 : _.now();
            timeout = null;
            result = func.apply(context, args);        if (!timeout) context = args = null;
        };    return function() {        var now = _.now();        if (!previous && options.leading === false) previous = now;        //计算剩余时间
            var remaining = wait - (now - previous);
            context = this;
            args = arguments;        //剩余时间小于等于0或者剩余时间大于等待时间(本地时间变动出现)
            if (remaining <= 0 || remaining > wait) {            if (timeout) {
                    clearTimeout(timeout);
                    timeout = null;
                }
                previous = now;
                result = func.apply(context, args);            if (!timeout) context = args = null;
            } else if (!timeout && options.trailing !== false) {
                timeout = setTimeout(later, remaining);
            }        return result;
        };
    };

    函数防抖(debounce)

    函数防抖就是在函数需要频繁触发情况时,只有足够空闲的时间,才执行一次。好像公交司机会等人都上车后才出站一样。

    场景:

    实时搜索(keyup)

    拖拽(mousemove)

    实现:

    function debounce(method, delay){    var timer = null;    return function(){        var context = this,args = arguments;
            clearTimeout(timer);
            timer = setTimeout(function(){
                method.apply(context, args);
            },delay);
        }
    }document.getElementById('debounce').onclick = debounce(function(){console.log('click')},2000);

    underscore实现:

    _.debounce = function(func, wait, immediate) {    var timeout, args, context, timestamp, result;    var later = function() {        var last = _.now() - timestamp;        if (last < wait && last >= 0) {
                timeout = setTimeout(later, wait - last);
            } else {
                timeout = null;            if (!immediate) {
                    result = func.apply(context, args);                if (!timeout) context = args = null;
                }
            }
        };    return function() {
            context = this;
            args = arguments;
            timestamp = _.now();        var callNow = immediate && !timeout;        if (!timeout) timeout = setTimeout(later, wait);        if (callNow) {
                result = func.apply(context, args);
                context = args = null;
            }        return result;
        };
    };

    函数节流(throttle)和函数防抖(debounce)都是通过延时逻辑操作来提升性能的方法,在前端优化中是常见且重要的解决方式。可以从概念和实际应用中理解两者的区别,在需要的时候选择合适的方法处理。

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    用JS代码做出弹幕效果

    用H5的canvas做出弹幕效果

    以上就是JS的函数节流使用的详细内容,更多请关注php中文网其它相关文章!

php中文网赞助会员

PHP中文网

未登录