引入防抖和节流解决的问题：避免函数频繁，无限制的被调用，从而加重浏览器的负担，造成不必要的麻烦（常见的有鼠标移动onmousemove事件，存在人为鼠标抖动，造成频繁调用函数）
防抖
（防止频繁触发函数，例如鼠标移动的时候，鼠标抖动频繁触发函数）
最后一次触发有效。在限定事件内多次触发，前一次会被清除重新计时后一次的。
（借助于 setTimeout 来实现，当在设定事件内多次触发时，上次的延迟代码用clearTimeout清除掉，进行重新计时下一次的）
//计数
var n = 0;
/**防抖
* func：要执行的函数
* time：等待的时间
* */
function debounce(func,time,isNow){
console.log("大函数被调用，在重写的时候调用一次，之后便是执行下面返回的函数————————————————")
let timeout=null
//返回一个函数作为鼠标移动的重写函数
return function(){
console.log(timeout)
//判断上回的是否执行完毕，没有清除进行最后一次重新计时
if(timeout){
clearTimeout(timeout)
}
if(isNow){
//立刻执行的防抖函数
var nowTime=!timeout
timeout=setTimeout(function(){
timeout=null
},time)
if(nowTime){
func();
}
}else{
//非立即执行的防抖函数
timeout=setTimeout(function(){
func();
timeout=null
},time)
}
}
}
function move(){
console.log("小函数调用"+(n++)+"次")
}
//重写当前元素的鼠标移动事件
///非立即执行
//document.onmousemove=debounce(move,2000,false)
//立即执
document.onmousemove=debounce(move,2000,true)
节流
控制函数的触发频率，来达到匀速触发
（借助于时间戳《几秒执行一次》，或者setTimeout 《每次调用都判断上回的是否运行完毕，再运行完毕后才触发下一次》）
/**
* func：要执行的函数名
* time：延迟的时间
*/
function throttle(func,time){
var timeout=null
return function(){
//每回调用都判定上回是否运行完毕
if(!timeout){
timeout=setTimeout(function(){
func()
timeout=null
},time)
}
}
}
function sc(){
console.log("点击了"+(n++)+"次")
}
document.onmousedown=throttle(sc,1000)
区别
- 防抖：在限制事件段内频繁触发会存在清除上一次，实现最后一次触发有效
- 节流：控制函数的触发频率，来达到匀速触发
