<div style='height:9999px;'></div>

<script type="text/javascript">
//------------------------------------ 防抖
function debounce(func, wait=0) {
if (typeof func !== 'function') {
　throw new TypeError('need a function arguments')
}
let timeid = null;
let result;
console.log("start"); //只執行一次
return function() { //之後執行下面
clearTimeout(timeid);
　　timeid = setTimeout(function() {
　　　　result = func.apply(this, arguments);
　　}, wait);
　　return result;
}
}
// 處理函式
function handle() {
　　console.log(arguments);
}
// 滾動事件
window.addEventListener('scroll', debounce(handle, 1000));

</script>

<script>
//------------------------------------ 節流
//時間戳版本
//使用時間戳的節流函式會在第一次觸發事件時立即執行，以後每過 delay 秒之後才執行一次，並且最後一次觸發事件不會被執行

var throttle = function(func, delay){
　　var prev = Date.now();
　　return function(){
　　　　var now = Date.now();
　　　　if(now-prev>=delay){

//定時器方式：
//使用定時器的節流函式在第一次觸發時不會執行，而是在 delay 秒之後才執行，當最後一次停止觸發後，還會再執行一次函式

var throttle = function(func, delay){
　　var timer = null;
　　return function(){
　　　　if(!timer){
　　　　　　timer = setTimeout(function(){

//應用場景

// 1、防抖（debounce）
// 1）每次 resize/scroll 觸發統計事件
// 2）文字輸入的驗證，連續輸入文字後傳送 AJAX 請求進行驗證，驗證一次就好。

// 2、節流（throttle）
// 1）DOM 元素的拖拽功能實現（mousemove）
// 2）搜尋聯想（keyup）
// 3）計算滑鼠移動的距離（mousemove）
// 4）Canvas 模擬畫板功能（mousemove）
// 5）射擊遊戲的 mousedown/keydown 事件（單位時間只能發射一顆子彈）
// 6）監聽滾動事件判斷是否到頁面底部自動載入更多

//總結

//函式防抖：將幾次操作合併為一次操作進行。原理是維護一個計時器，規定在delay時間後觸發函式，但是在delay時間內再次觸發的話，就會取消之前的計時器而重新設定。這樣一來，只有最後一次操作能被觸發。

//函式節流：使得一定時間內只觸發一次函式。原理是通過判斷是否到達一定時間來觸發函式。

</script>