一、什么是函數節流
函數節流：是確保函數特定的時間內至多執行一次。
1.函數節流的原理
函數節流的原理挺簡單的，當第一次觸發函數執行時，創建一個定時器，延遲這個事件，如果在當前時間內再次觸發，就清除原來的定時器，重新創建一個定時器，延遲執行。
2.應用場景
搜索聯想/mousemove/keydown/高頻率的點擊
3.代碼實現
<!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>函數節流</title>
</head>
<body>
<script>
//函數節流
const throttle = (fun, delay) => {
let last = null;
return () => {
//獲取毫秒數
const now = +new Date();
if (now - last > delay * 1000) {
fun();
last = now;
}
}
}
//實例函數
const throttleDemo = throttle(() => console.log('throttleDemo'), 1);
//函數調用
throttleDemo();
</script>
</body>
</html>
二、什么是函數防抖
函數防抖：是函數在特定的時間內不被再調用后執行。
1.函數防抖的原理
如果函數多次觸發，則把上次記錄的定時器清掉，重新開始。如果計時完畢，沒有方法進來訪問觸發，則執行代碼。
2.應用場景
多用在onresize跟onscroll，這兩個事件一個在頁面放大縮小時觸發一個在頁面滾動時觸發，都是連續不斷的觸發的
3.代碼實現
<!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>函數防抖</title>
</head>
<body>
<script>
//函數防抖
const debouce = (fun, delay) => {
let timer = null;
return () => {
clearTimeout(timer);
timer = setTimeout(() => {
fun();
}, delay * 1000);
};
};
//實例函數
const debouceDemo = debouce(() => console.log('debouceDemo'), 1);
//函數調用
debouceDemo();
</script>
</body>
</html>
