JS节流、防抖的区别，以及应用场景

函数节流与函数防抖都是为了限制函数的执行次数，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟、假死或卡顿的现象。

函数节流

当持续触发事件时，每隔一段时间函数就触发一次，不管在这段时间内，触发了多少次事件，在这段之间内就只触发一次。举个例子，input框中输入内容，触发keyup事件，通过ajax请求，将文字传给后端。如果用户一直输入文字，持续了6秒，我们设定的时间是3秒，那么就执行了2次ajax请求，不管中间用户触发了多少次keyup事件。
那我们来看一下代码：

var flag = true;
//假设btn是提交按钮
btn.onclick = function throttling(){
    if(!flag) return false;
    flag = false;
    setTimeout(function(){
        console.log("提交");
        flag = true;
    },1000);
};

函数节流的应用场景

1. 鼠标连续不断的触发某个事件，在单位时间内只触发一次
2. 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断。
3. 在页面的无限加载下，需要用户在滚动页面时，每隔一段时间发送一次ajax请求，而不是用户在停下页面滚动的时候，再去请求。

函数防抖

事件触发后延迟执行动作，适用于频繁触发的事件，如在百度搜索输入搜索内容，输入时不执行搜索，停止输入后经过一小段延迟执行搜索展示搜索结果。（当持续触发事件停止一段时间之后才执行的函数）

var timer; //设置定时器
var search;  //假设为输入内容
search.Oninput = function debounce() {
	if(timer) {
	clearTimeout(timer)
	}
	timer = setTimeout(function() {
	console.log("搜索")
	},1000)
}