函数的防抖与节流
节流：在规定的间隔事件范围内不会重复触发回调，只有大于这个事件间隔才会触发回调，把频繁触发变为少量触发
防抖：前面的所有的触发都被取消，最后一次执行在规定的的时间之后才会触发，也就是说如果连续快速的触发，只会执行一次
<body>
<p>输入内容：<input type="text"></p>
<script>
let input=document.querySelector("input")
//文本发生变化立即执行
input.oninput=function(){
console.log(123)
}
</script>
</body>
只要有文本的变化就会立即执行一次
我们使用一个插件实现防抖lodash插件
这个lodash插件，里面封装了函数的防抖和节流的业务
https://www.lodashjs.com/
对外暴露一个_函数
console.log(_)
bounced（防抖动）函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用。 可以提供一个 options（选项） 对象决定如何调用 func 方法，options.leading 与|或 options.trailing 决定延迟前后如何触发（注：是 先调用后等待 还是 先等待后调用）。 func 调用时会传入最后一次提供给 debounced（防抖动）函数 的参数。 后续调用的 debounced（防抖动）函数返回是最后一次 func 调用的结果。
这个函数是有一个返回值的
我们看
let result =_.debounce(function(){},1000)
console.log(result)
<body>
<p>输入内容：<input type="text"></p>
<script>
let input=document.querySelector("input")
//文本发生变化立即执行
input.oninput=_.debounce(function(){
console.log(123)
},1000)
</script>
</body>
此时在进行输入完成之后在触发，就可以实现防抖
再看节流
<h1>计数器<span>0</span></h1>
<button>按钮加一</button>
<script>
var btn=document.querySelector("button")
var span=document.querySelector("span")
var count =0
btn.onclick=function(){
count++
span.innerHTML=count
}
</script>
现在点击几次就会变化多少次
如果我们想要在一秒内只执行这一次，不管行为有多快都只执行一次
创建一个节流函数，在 wait 秒内最多执行 func 一次的函数。 该函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用。 可以提供一个 options 对象决定如何调用 func 方法， options.leading 与|或 options.trailing 决定 wait 前后如何触发。 func 会传入最后一次传入的参数给这个函数。 随后调用的函数返回是最后一次 func 调用的结果。
<h1>计数器<span>0</span></h1>
<button>按钮加一</button>
<script>
var btn=document.querySelector("button")
var span=document.querySelector("span")
var count =0
btn.onclick=_.throttle(function(){
count++
span.innerHTML=count
console.log(123)
},1000)
</script>
此时在进行快速的点击不管点击多少次都会在一秒内只执行一次
防抖：用户操作很频繁，但是只执行一次
节流：用户操作很频繁，但是把频繁的操作变为少陵操作（可以给浏览器有充裕的时间解析代码）
