如果沒有這個(gè) JavaScript 功能，95%的用戶會(huì)討厭使用你的應(yīng)用程序
學(xué)習(xí)這個(gè)強(qiáng)大的 JS 特性，可以極大地提高用戶體驗(yàn)，阻止用戶放棄你的應(yīng)用。
并大大節(jié)省成本。
他們會(huì)討厭你的應(yīng)用程序
沒有它，他們會(huì)因?yàn)樵愀獾挠脩趔w驗(yàn)而感到惱火，永遠(yuǎn)不會(huì)回來。
示例：想象一下，已經(jīng)創(chuàng)建了一個(gè)出色的 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>
);
}但不幸的是，存在一個(gè)嚴(yán)重的問題 - 你能發(fā)現(xiàn)嗎？??
圖片
我剛開始寫作，你的 AI 立刻就在告訴我關(guān)于拼寫錯(cuò)誤的胡說八道！
我的呼吸空間在哪里？你不能至少讓我停止打字嗎？
哦不，我完了——你毀了我的一天，我永遠(yuǎn)不會(huì)回來??。
但幸運(yùn)的是，那只是你在另一個(gè)現(xiàn)實(shí)中的樣子——真正的你已經(jīng)知道這樣的用戶體驗(yàn)最好是令人煩惱，最糟糕的是令人憤怒。
這就是為什么你知道這是編寫 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);
// 重新啟動(dòng)延遲
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 在給出建議前會(huì)等待 1 秒！
圖片
現(xiàn)在每個(gè)人都愛上了你的應(yīng)用程序 - 即使我們嘗試，也無法停止使用它..
在編程中，我們稱這種技術(shù)為防抖。
它無處不在..
Google 搜索：無論何時(shí)搜索，你都在體驗(yàn)防抖動(dòng)的實(shí)際應(yīng)用。
圖片
注意輸入和自動(dòng)完成更新之間的延遲。這不是延遲，而是防抖。
對(duì)話：當(dāng)我們在辯論，你讓我先說完我的觀點(diǎn)再回應(yīng)，你就是在防抖。
你沒有打斷我并開始尖叫——你通過不斷設(shè)定一個(gè)潛意識(shí)的超時(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ù)器正在呼救。
在防抖動(dòng)之前：
1000 個(gè)用戶每秒打字 10 次 = 10 x 60 x 1000 = 600,000 次請求每分鐘！
這個(gè)負(fù)載并不是云計(jì)算的功能問題，但是成本呢？
尤其是因?yàn)槟憧赡苷谑褂孟?OpenAI 或 GCP Vertex 這樣的昂貴的 AI 服務(wù)。
打字頻率不再重要 - 如果他們每分鐘暫停打字 10 次，那就沒關(guān)系
10 x 1000 = 10,000 次請求每分鐘！請求和成本減少了 98.3%！
之前每天花費(fèi) 1000 美元，但現(xiàn)在的花費(fèi)少于 170 美元（！）
你過去花一天的時(shí)間，現(xiàn)在需要花一周的時(shí)間。這要?dú)w功于防抖。
但是你可以做得更好
好吧，但那仍然相當(dāng)于每月 5000 美元 - 我們能做得更好嗎？
用戶中有 90%是免費(fèi)的，我們需要將他們的使用量保持在最低限度。
幸運(yùn)的是，你非常聰明，所以你很快就想出了這個(gè)：
```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);
};在獲取他們的最后一個(gè)建議后，你將忽略免費(fèi)用戶 20 秒。
所以他們每分鐘只有 3 個(gè)建議。
900 個(gè)免費(fèi)用戶，100 個(gè)付費(fèi)用戶。
900 x 3 + 100 x 10 = 3,700 次請求每分鐘 - 從降至1,900。
一箭雙雕：
- 63%的節(jié)省
- 激勵(lì)免費(fèi)用戶升級(jí)以獲得無限建議。
這是我們稱之為節(jié)流的另一種技術(shù)。
并且它會(huì)出現(xiàn)在你有周期性限制訪問某物的任何地方：
- GPT-4o 模型：自 2024 年 5 月 13 日起，僅允許 Plus 用戶每 3 小時(shí)發(fā)送 80 條消息。
- 吃東西：你一次只能吞下那么多食物
我們早些時(shí)候辯論的回顧：
- 防抖：你等我說完再回應(yīng)，反之亦然。
- 節(jié)流閥：我們每次最多只有 5 分鐘的時(shí)間來交談。
有了這個(gè)強(qiáng)大的組合，原本只持續(xù)一天的現(xiàn)在可以持續(xù) 3 周。
60 萬個(gè)請求變成了 3700 個(gè)，每個(gè)人都喜歡你的應(yīng)用。
