函式的防抖與節流
節流：在規定的間隔事件範圍內不會重複觸發回撥，只有大於這個事件間隔才會觸發回撥，把頻繁觸發變為少量觸發
防抖：前面的所有的觸發都被取消，最後一次執行在規定的的時間之後才會觸發，也就是說如果連續快速的觸發，只會執行一次
<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>
此時在進行快速的點選不管點選多少次都會在一秒內只執行一次
防抖：使用者操作很頻繁，但是隻執行一次
節流：使用者操作很頻繁，但是把頻繁的操作變為少陵操作（可以給瀏覽器有充裕的時間解析程式碼）