JS防抖和节流

定义：在一定时间周期内，只执行一次函数调用。

不同的是防抖在一定周期内，只执行最后一次函数调用。

节流在一定周期内，执行第一次函数调用。

防抖使用场景：模糊查询，用户输入文本是自动搜索数据。如用户想搜索联想笔记本，用户在输入联想时就出来关于联想的数据，但这并不是用户想搜索的东西，用户想搜索的是联想笔记本。这个时候可以用到防抖来实现。以用户最后一次输入的条件执行调用函数。

防抖函数简单实现

    //简单的防抖函数
    function debounce(func, wait, immediate) {
        //定时器变量
        var timeout;
        return function () {
            //每次触发scrolle，先清除定时器
            clearTimeout(timeout);
            //指定多少秒后触发事件操作handler
            timeout = setTimeout(func, wait);
        };
    };
    //绑定在scrolle事件上的handler
    function handlerFunc() {
        console.log('Success');
    }
    //没采用防抖动
    dom.addEventListener('click', handlerFunc);
    //采用防抖动
    dom.addEventListener('click', debounce(handlerFunc, 1000));

节流使用场景：防止表单一定时间周期内双击或多次点击。实现方式虽然很多，如sql数据库建唯一索引，服务端验证唯一性，按钮只能调用一次隐藏等。 和节流。

    var throttle = function (func, delay) {
        var prev = Date.now()
        return function () {
            var context = this;
            var args = arguments;
            var now = Date.now();
            if (now - prev >= delay) {
                func.apply(context, args);
                prev = Date.now();
            }
        }
    }

    function handle() {
        console.log(Math.random());
    }
    dom.addEventListener('click', throttle(handle, 1000));