函數節流（throttle）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Throttle</title>
<style>
html,
body {
height: 500%;
/*讓其出現滾動條*/
}
</style>
</head>
<body>
<script>
// 函數節流：函數在執行一次後，只有在大於設定的執行週期之後纔會執行第二次
/*
其原理是用 時間戳 來判斷是否已到回調該執行時間，記錄上次執行的時間戳，然後每次觸發 scroll 事件執行回調，回調中判斷當前時間戳距離上次執行時間戳的間隔是否已經到達 規定時間段，如果是，則執行，並更新上次執行的時間戳，如此循環；
用到了閉包的特性，可以使變量lastTime的值長期保存在內存中。
*/
function throttle(fn, delay) {
// 記錄上一次函數觸發的時間
let lastTime = 0
return function () {
// 記錄當前函數執行時間
let nowTime = Date.now()
if(nowTime - lastTime > delay){
// 修正this指向問題
fn.call(this)
// 同步時間
lastTime = nowTime
}
}
}
function fn(){
console.log('scroll 事件被觸發了' + Date.now())
}
document.onscroll = throttle(fn, 2000)
</script>
</body>
</html>
函數防抖（debounce）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Debounce</title>
</head>
<body>
<button id="btn">按鈕</button>
<script>
/*
防抖函數：一個需要頻繁觸發的函數，在規定時間內，只讓最後一次生效，前面的不生效。
實現原理：
第一次調用函數，創建一個定時器，在指定的時間間隔之後運行
第二次調用該函數，清除前一次的定時器，並設置另一個
如果前一個定時器已經執行過了，這個操作就沒有任何意義
如果前一個定時器尚未執行，其實就是將其替換爲一個新的定時器，然後延遲一定時間再執行
*/
function debounce(fn, delay){
// 記錄上一次的延時器
let timer = null
return function(){
// 清除上一次的定時器
clearTimeout(timer)
timer = setTimeout(()=>{
fn()
}, delay)
}
}
function fn() {
console.log('點擊事件被觸發' + Date.now())
}
document.getElementById('btn').onclick = debounce(fn, 2000)
</script>
</body>
</html>
