js函数的节流和防抖
用户浏览页面时会不可避免的触发一些高频度触发事件（例如页面 scroll ，屏幕
resize，监听用户输入等），这些事件会频繁触发浏览器的重拍（reflow）和重绘（repaint）这会严重耗费浏览器性能，造成页面
卡顿。
举几个例子：比如说我们在滚动事件中要做一个复杂的计算，或者做一个按钮的防二次点击操作的需求，这些需求都会在频繁的事件
回调中做复杂计算，很有可能导致页面卡顿，这时候我们可以将多次计算合并为一次计算，只在一个精确点做操作。这些事可以利用
函数的防抖来实现
函数的防抖，就是可以让这个函数每次触发的时间间隔小于wait，防抖的情况下就是假设用户一直触发我这个函数，这个函数只会调用一次，也就是在最后一次来进行调用，下面是一个简单的防抖函数代码实现
//func是你要绑定防抖操作的函数，wait是你想要这个函数多少ms之内不能连续触发，也就是假如你设置了100ms后触发，那这个函数在100ms之内如果又执行了就不会触发，直到超过100ms后这个函数才会执行
function debounce(func, wait) {
// 定时器变量
var timer
return function() {
// 每次触发绑定的函数之前先清除定时器
clearTimeout(timer)
// 指定 xx ms 后触发
timer = setTimeout(func, wait)
}
}
// 实际想绑定在 scroll 事件上的 handler
function realFunc(){
console.log("success ")
}
// 采用防抖动
window.addEventListener('scroll',debounce(realFunc,500))
假如说有现在这样一个需求，我们需要在滚动的时候实时的console.log(0)，你懂得，在一次滚动过程中函数的执行频率特别快
，如果这个函数有更为复杂的方法，比如操作dom或者其他交互，会严重影响性能。这个时候我们就需要做一个节流的操作来减
少这个函数的调用频率
函数节流，就是将多次执行变成每隔一段固定的时间执行一次，会大大提高性能，比如我们可以设置一个高频率事件每隔100ms执行一次，这样性能就会得到很大的优化，下面是一个简单的节流函数的代码实现
//mustRunTime就是你想要设置的多少ms执行一次
function throttle(func, wait, mustRunTime) {
var timer,
startTime = new Date();
return function() {
var _this = this,
args = arguments,
curTime = new Date();
clearTimeout(timer);
// 如果达到了规定的触发时间间隔，就触发这个func
if(curTime - startTime >= mustRunTime){
func.apply(_this,args);
startTime = curTime;
// 没达到触发间隔，重新设定定时器
}else{
timer = setTimeout(func, wait);
}
};
};
function realFunc(){
console.log("success");
}
// 采用了节流函数
window.addEventListener('scroll',throttle(realFunc,500,1000));