函数防抖

场景

假定网站有个搜刮框, 用户输入文本我们会自动遐想匹配出一些效果供用户挑选,我们能够起首想到的做法就是监听keypress事宜, 然后异步查询效果. 然则假如用户疾速的输入了一串字符, 假定是10个字符, 那末就会在霎时触发10次要求, 这无疑不是我们想要的, 我们想要的是用户住手输入的时刻才去触发查询的要求.

道理

函数防抖就是让某个函数在上一次实行后, 满足守候某个时候内不再触发此函数后再实行, 而在这个守候时候内再次触发此函数, 守候时候会从新盘算.

完成

underscore.js的函数防抖定义: _.debounce(fn, wait, [immediate]);

debounce吸收三个参数:
@params fn: 须要举行函数防抖的函数;
@params wait: 须要守候的时候, 单元为毫秒;
@params immediate: 假如为true, 则debounce会在挪用时马上实行一次fn,
                   而不须要比及wait完毕后.

_.debounce = function(fn, 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 = fn.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 = fn.apply(context, args);
            context = args = null;
        }

        return result;
    }
};

// demo:
$('#input').keypress(_.debounce(function() {
    //异步挪用查询
}, 300));