&

如何解決按鈕重復(fù)點(diǎn)擊？這個(gè)問題掛了80%的人！

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

admin

2025年4月21日 17:46 本文熱度 82

前言

還記得上周我們團(tuán)隊(duì)在招聘前端工程師，一個(gè)看起來經(jīng)驗(yàn)豐富的候選人坐在我對面。

"你們項(xiàng)目中是如何處理按鈕重復(fù)點(diǎn)擊的問題的？"我拋出了這個(gè)看似簡單的問題。

"這個(gè)簡單，使用防抖就可以了。"他很快回答。

然而，當(dāng)我繼續(xù)追問細(xì)節(jié)時(shí)，他卻陷入了沉思...

實(shí)際上，這個(gè)問題看似簡單，但是要真正的解決好，需要考慮很多細(xì)節(jié)。在我面試了很多候選人中，能完整答出來的不到20%。

問題背景

在日常開發(fā)中，我們經(jīng)常會(huì)遇到這樣的場景：

用戶瘋狂點(diǎn)擊提交按鈕
表單重復(fù)提交導(dǎo)致數(shù)據(jù)異常
批量操作按鈕被連續(xù)觸發(fā)

這些問題如果處理不當(dāng)，輕則影響用戶體驗(yàn)，重則可能造成數(shù)據(jù)錯(cuò)誤。今天，就讓我們通過一個(gè)真實(shí)的面試場景，逐步深入這個(gè)問題

面試場景

面試官：項(xiàng)目中如何處理按鈕重復(fù)點(diǎn)擊的問題？

候選人：可以使用防抖（debounce）。

js
?
const debouncedSubmit = debounce(submit, 300);

面試官：那假設(shè)我防抖設(shè)置了1秒,我現(xiàn)在請求了,但是接口響應(yīng)比較慢,要3秒,用戶在這3秒內(nèi)點(diǎn)擊了多次,那怎么辦? 防抖是不是就沒用了?

一般說到這里,很多人就不知道怎么搞了

候選人：可以給按鈕加上 loading 狀態(tài)，點(diǎn)擊后設(shè)置 loading 為 true，等操作完成后再設(shè)置為 false。

jsx

const [loading, setLoading] = useState(false);

const handleSubmit = async () => {
    setLoading(true);
    try {
        await submitData();
    } finally {
        setLoading(false);
    }
}

面試官：這個(gè)思路不錯(cuò)，但是如果項(xiàng)目中有很多按鈕都需要這樣處理，你會(huì)怎么做？

候選人：額...每個(gè)按鈕都寫一遍 loading 狀態(tài)管理？

面試官：那樣就會(huì)有很多重復(fù)代碼，有沒有想過怎么封裝呢？

到這里也卡掉了很多人

解決方案

我們可以封裝一個(gè)自定義 Hook

js

import {useState,useCallback,useRef} from 'react'

function useLock(asyncFn) {
    const [loading, setLoading] = useState(false)
    const asyncFnRef = useRef(null)
    asyncFnRef.current = asyncFn
    const run = useCallback(async (...args) => {
        if(loading) return
        setLoading(true)
        try {
            await asyncFnRef.current(...args)
        } finally {
            setLoading(false)
        }
    }, [loading])

    return [loading,run]
}

然后封裝一個(gè)通用的 Button 組件

jsx

import {Button as AntButton} from 'antd'

const Button = ({onClick,...props})=>{
    const {loading, run} = useLock(onClick || (()=> {}))
    return <AntButton loading={loading} {...props} onClick={run}></button>
}

使用示例

jsx

const Demo = () => {
    const handleSubmit = async () => {
        // 模擬異步請求
        await new Promise(resolve => setTimeout(resolve, 2000))
        console.log('提交成功')
    }

    return (
        <Button onClick={handleSubmit}>
            提交
        </Button>
    )
}