如果沒有這個 JavaScript 功能，95%的用戶會討厭使用你的應(yīng)用程序
學(xué)習(xí)這個強(qiáng)大的 JS 特性，可以極大地提高用戶體驗，阻止用戶放棄你的應(yīng)用。
并大大節(jié)省成本。
他們會討厭你的應(yīng)用程序
沒有它，他們會因為糟糕的用戶體驗而感到惱火，永遠(yuǎn)不會回來。
示例：想象一下，已經(jīng)創(chuàng)建了一個出色的 AI 寫作助手，為編寫引人入勝的故事提供有用的建議：
圖片
已經(jīng)在 handleChange 中為請求設(shè)置好了API：
export function AssistantUI() {
const [suggestions, setSuggestions] = useState('');
const [loading, setLoading] = useState(false);
const handleChange = async (event: any) => {
const value = event.target.value;
setLoading(true);
const res = await fetch(
'https://api.writer.example.com/suggestions',
{
method: 'POST',
body: JSON.stringify({ text: value }),
}
);
const json = await res.json();
setSuggestions(json.suggestions);
setLoading(false);
};
return (
<div className="flex flex-col justify-center flex-wrap content-start">
<textarea
notallow={handleChange}
className="mt-2 mb-4"
cols={40}
rows={10}
/>
{/* ... */}
</div>
);
}但不幸的是，存在一個嚴(yán)重的問題 - 你能發(fā)現(xiàn)嗎？??
圖片
我剛開始寫作，你的 AI 立刻就在告訴我關(guān)于拼寫錯誤的胡說八道！
我的呼吸空間在哪里？你不能至少讓我停止打字嗎？
哦不，我完了——你毀了我的一天，我永遠(yuǎn)不會回來??。
但幸運的是，那只是你在另一個現(xiàn)實中的樣子——真正的你已經(jīng)知道這樣的用戶體驗最好是令人煩惱，最糟糕的是令人憤怒。
這就是為什么你知道這是編寫 handleChange 的更好方式：
export function AssistantUI() {
const [suggestions, setSuggestions] = useState('');
const [loading, setLoading] = useState(false);
const timeout = useRef<NodeJS.Timeout | null>(null);
const handleChange = async (event: any) => {
const value = event.target.value;
setLoading(true);
// 重新啟動延遲
clearTimeout(timeout.current!);
// 在獲取數(shù)據(jù)前延遲1秒
timeout.current = setTimeout(async () => {
const res = await fetch(
'https://api.writer.example.com/suggestion',
{
method: 'POST',
body: JSON.stringify({ text: value }),
}
);
const json = await res.json();
setSuggestions(json.suggestions);
setLoading(false);
}, 1000);
};
return (
<div className="flex flex-col justify-center flex-wrap content-start">
<textarea
notallow={handleChange}
className="mt-2 mb-4"
cols={40}
rows={10}
/>
{/* ... */}
</div>
);
}現(xiàn)在 AI 在給出建議前會等待 1 秒！
圖片
現(xiàn)在每個人都愛上了你的應(yīng)用程序 - 即使我們嘗試，也無法停止使用它..
在編程中，我們稱這種技術(shù)為防抖。
它無處不在..
Google 搜索：無論何時搜索，你都在體驗防抖動的實際應(yīng)用。
圖片
注意輸入和自動完成更新之間的延遲。這不是延遲，而是防抖。
對話：當(dāng)我們在辯論，你讓我先說完我的觀點再回應(yīng)，你就是在防抖。
你沒有打斷我并開始尖叫——你通過不斷設(shè)定一個潛意識的超時，確保我最終停止說話：
let silenceTimeout;
let silenceDelay = 1000;
function debounceReplyToOpponent() {
clearTimeout(silenceTimeout);
silenceTimeout = setTimeout(() => {
reply('Your fallacious premises have no basis in reality');
}, silenceDelay);
}你損失了數(shù)千美元
用戶不是唯一負(fù)載過重的 —— 服務(wù)器正在呼救。
在防抖動之前：
1000 個用戶每秒打字 10 次 = 10 x 60 x 1000 = 600,000 次請求每分鐘！
這個負(fù)載并不是云計算的功能問題，但是成本呢？
尤其是因為你可能正在使用像 OpenAI 或 GCP Vertex 這樣的昂貴的 AI 服務(wù)。
打字頻率不再重要 - 如果他們每分鐘暫停打字 10 次，那就沒關(guān)系
10 x 1000 = 10,000 次請求每分鐘！請求和成本減少了 98.3%！
之前每天花費 1000 美元，但現(xiàn)在的花費少于 170 美元（?。?/p>
你過去花一天的時間，現(xiàn)在需要花一周的時間。這要歸功于防抖。
但是你可以做得更好
好吧，但那仍然相當(dāng)于每月 5000 美元 - 我們能做得更好嗎？
用戶中有 90%是免費的，我們需要將他們的使用量保持在最低限度。
幸運的是，你非常聰明，所以你很快就想出了這個：
```javascript
const timeout = useRef<NodeJS.Timeout | null>(null);
const ignoring = useRef<boolean>(false);
const handleChange = async (event: any) => {
if (plan === 'free') {
// 仍在忽略，所以返回
if (ignoring.current) return;
// 開始忽略 20 秒
ignoring.current = true;
setTimeout(() => {
ignoring.current = false;
}, 20 * 1000);
}
debounce();
const value = event.target.value;
setLoading(true);
const res = await fetch(
'https://api.writer.example.com/suggestion',
{
method: 'POST',
body: JSON.stringify({ text: value }),
}
);
const json = await res.json();
setSuggestions(json.suggestions);
setLoading(false);
};在獲取他們的最后一個建議后，你將忽略免費用戶 20 秒。
所以他們每分鐘只有 3 個建議。
900 個免費用戶，100 個付費用戶。
900 x 3 + 100 x 10 = 3,700 次請求每分鐘 - 從降至1,900。
一箭雙雕：
- 63%的節(jié)省
- 激勵免費用戶升級以獲得無限建議。
這是我們稱之為節(jié)流的另一種技術(shù)。
并且它會出現(xiàn)在你有周期性限制訪問某物的任何地方：
- GPT-4o 模型：自 2024 年 5 月 13 日起，僅允許 Plus 用戶每 3 小時發(fā)送 80 條消息。
- 吃東西：你一次只能吞下那么多食物
我們早些時候辯論的回顧：
- 防抖：你等我說完再回應(yīng)，反之亦然。
- 節(jié)流閥：我們每次最多只有 5 分鐘的時間來交談。
有了這個強(qiáng)大的組合，原本只持續(xù)一天的現(xiàn)在可以持續(xù) 3 周。
60 萬個請求變成了 3700 個，每個人都喜歡你的應(yīng)用。
