函数防抖，函数节流

我又双叒叕来捡起一切的老知识了~

今天主要回顾的是：
作为为数不多的面试中高频问题且实际工作经常用到的——函数防抖，节流
首先科普一下函数防抖，节流的概念：

函数防抖：就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

函数节流：限制一个函数在一定时间内只能执行一次。

常见应用场景

• 函数防抖的应用场景

  • 搜索框搜索输入。只需用户最后一次输入完，再发送请求
  • 手机号、邮箱验证输入检测
  • 窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

• 函数节流的应用场景

  • 间隔一段时间执行一次回调的场景有：
  • 滚动加载，加载更多或滚到底部监听
  • 谷歌搜索框，搜索联想功能
  • 高频点击提交，表单重复提交

接下来现讲函数防抖，函数防抖细分的话可以为立即执行版和延迟执行版
立即执行版：

var immediately = (function () {
    var flag = true;
    var timer;
    return function () {
        if (flag) {
            flag = false;
            console.log('按钮被点击了');
        }
        else {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            flag = true;
        }, 2000);
    };
})();

延迟执行版

var timeoutFun = (function () {
    var timer;
    return function () {
        clearTimeout(timer);
        timer = setTimeout(function () {
            console.log('按钮被点击了');
        }, 2000);
    };
})();

函数节流

// dom在这里假设为一个窗口
dom.onresize = (function () {
    var date = new Date().getTime();
    console.log(date);
    return function () {
        var newDate = new Date().getTime();
        if (newDate - date > 1000) {
            console.log(1);
            date = newDate;
        }
    };
})();