js防抖与节流

函数防抖

事件触发后延迟执行动作，适用于频繁触发的事件，如在百度搜索输入搜索内容，输入时不执行搜索，停止输入后经过一小段延迟执行搜索展示搜索结果。
函数防抖的实现关键是对setTimeout函数的应用
以搜索为例

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

用户输入搜索内容触发输入时间，一秒延迟后执行搜索动作，如果在这一秒内用户继续输入内容，定时器被清除，计时重新开始。

函数节流

在固定时间内只触发一次操作，在周期内新事件触发不执行动作。如一秒内重复多次点击提交按钮，只执行一次操作。
实现关键是flag和setTimeout的应用

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

如果flag为false说明还在提交周期内，不能执行“提交”动作，执行“提交”动作后flag置为true。

区别

函数防抖是将一个周期内的多次操作通过重置计时器的方式合并到一次操作中，而函数节流是一个周期内只允许只执行一次操作，多余的操作将直接return false。