js的函数防抖与事件节流

函数节流 是指一定时间内方法只跑一次。函数防抖 是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次两者都是优化高频率执行js代码的一种手段

情景一

用户填写一个表单，填写完成后要点击提交，由于各种原因导致用户多点了几次，导致同样的数据重复；另一种情景，注册时邮箱的输入框，随着用户的输入，实时判断邮箱格式是否正确。此时，每一次的用户输入都触发邮箱格式检测事件，造成了浪费，于是设置两次输入之间的时间间隔大于800ms时（用户结束输入时），再执行检查邮箱格式。

针对针对上面，情况有一下集中解决方案

1. 提交时，对于同一用户，请求只有一个，之前的请求在没返回之前，后面请求都默默的失败，或提醒用户重复提交，这种要求请求的实例时唯一的，负责无法判断
2. 当用户点击按钮时，将按钮设为不可操作状态，防止用户多次点击。大多数情况下都可以，但个别情况下，用户有可能都不知道自己快速连续点击或鼠标自身除了问题，导致重复
3. 使用延时，防止用户短时间内重复操作，这种主要针对的是连续输入，延时请求

// 函数防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){
    clearTimeout(timer); // 清除未执行的代码，重置回初始化状态

    timer = setTimeout(function(){
        console.log("函数防抖");
    }, 300);
};  

我所使用的是第一种方案，原因有两点，一，一般请求使用的请求实例都是唯一的，个别需要自己进行new 操作，二，屏蔽操作按钮并设置后还得设置回来，有些麻烦，在加上并不能绝对有效的屏蔽重复操作

情景二

一个加载新闻的列表页，只要滚动到页面的最下面就继续加载一部分新闻出来，即滚动加载。聊天的历史记录也是下啦加载，列表数据过多，上拉分批加载，在上次加载数据还没完成之前，频繁上拉或下拉加载数据，导致数据请求过多，界面有坑能卡死

• 针对以上情景，可以等待上一次加载完成后再进行加载

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

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

由于滚动事件非常频繁，稍微滚动一下就会触发许多次，如果频繁触发的滚动，每一次都去检查是否到页面底部了再次造成了浪费。于是设置一个开关，一次只能有一个触发执行，并对执行设置计时一段时间再执行，执行完毕之后再解锁