js函数防抖和函数节流

概念

函数防抖：就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。（在频繁触发的情况下，只有在停止触发的时候才会执行）
函数节流：限制一个函数在一定时间内只能执行一次。

目的：函数防抖和函数节流都是用来优化高频率执行js代码的手段
简而言之就是在一定时间内，把高频率执行且效果一样的js代码优化掉

使用场景

1、函数防抖：

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

2、 函数节流

• 滚动加载，加载更多或滚到底部监听
• 谷歌搜索框，搜索联想功能
• 高频点击提交，表单重复提交

实现原理：

//函数防抖
//  函数防抖的要点，也是需要一个setTimeout来辅助实现。延迟执行需要跑的代码。
//  如果方法多次触发，则把上次记录的延迟执行代码用clearTimeout清掉，重新开始。
//  如果计时完毕，没有方法进来访问触发，则执行代码
$('.select-input').on('input',function(){
    var keyWord =  $(this).val()
    clearTimeout(flag)
    flag = setTimeout(function(){
        callBack(keyWord)
    },1500);

  // 函数节流
//  函数节流的要点是，声明一个变量当标志位，记录当前代码是否在执行。
//  如果空闲，则可以正常触发方法执行。
//  如果代码正在执行，则取消这次方法执行，直接return

    var canRun = true;
document.getElementById("throttle").onscroll = function(){
    if(!canRun){
        // 判断是否已空闲，如果在执行中，则直接return
        return;
    }

    canRun = false;
    setTimeout(function(){
        console.log("函数节流");
        canRun = true;
    }, 300);
};