JS函数节流

简介

函数节流：对重复的业务逻辑进行节流控制，执行最后一次操作并取消其他操作，以提高性能。

场景

当我们不希望某些业务逻辑频繁执行的时候，比如：
1.window的resize,scroll事件触发时需要执行的逻辑
2.拖拽时的mousemove事件
3.输入框的keyup，change事件等

节流器

如下实现一个节流器，可以避免执行重复的逻辑而只执行一次。

//节流器
var throttle = function(){
    //获取第一个参数
    var isClear = arguments[0],fn;
    //如果第一个参数是boolean类型那么第一个参数则表示清除计时器
    if(typeof isClear === 'boolean'){
            fn = arguments[1];
            fn._throttleID && clearTimeout(fn._throttleID);
        }else{
            //第一个参数为函数
            fn = isClear;
            //第二个参数为函数执行时的参数
            param = arguments[1];
            var p = $.extend({
                context:null,
                args:[],
                time:300,
            },param)
            //清除函数计时器
            arguments.callee(true,fn);
            //延迟执行函数
            fn._throttleID = setTimeout(function(){
                fn.apply(p.context,p.args)
            },300)
        }
}

应用

事件节流：

//返回顶部按钮动画
function moveScroll(){
        var top = $(document).scrollTop();
        $("#back").animate({top:top+20},400,'easeOutCubic')//需引入jquery和easing.js
    }
    $(window).on('scroll',function(){
        throttle(moveScroll)
    })

如上我们就可以使动画只执行一次了。而不会发生抖动情况，也提高了性能。