如何在按鈕點擊反應中添加延遲？

Question

我正在嘗試延遲單擊按鈕，以便我正在使用的庫可以快速調用 api 進行驗證。 我目前正在使用箭頭 function 進行反應並嘗試 setTimeout。 但是，由於某種原因，這似乎觸發了頁面加載調用。 這是我的代碼。

  onClick={this.handleCardSubmit}

handleCardSubmit = setTimeout(() => {
    this.setState({ showLoaderForPayment: true });
    const { collectJs } = this.state;
    collectJs.startPaymentRequest();
    this.setState({ isPaymentRequestCalled: true });
  }, 500);

Answer 1

您好，您需要更改您的 function 聲明和定義如下

handleCardSubmit = ()=>{
setTimeout(() => {
    this.setState({ showLoaderForPayment: true });
    const { collectJs } = this.state;
    collectJs.startPaymentRequest();
    this.setState({ isPaymentRequestCalled: true });
  }, 500);
}

在您的代碼片段中，您只是將 settimeout function 引用傳遞給handeCardSubmit，因此沒有綁定。 為了正確執行它，您必須在箭頭 function 內寫入 setTimeout function，然后它將像延遲 500 毫秒一樣工作。

Answer 2

你應該試試這個箭頭語法

 onClick={ () => this.handleCardSubmit() }

而不是這個

onClick={ this.handleCardSubmit } 

Answer 3

您可以使用 e.preventDefault()，並嘗試以下代碼。

handleCardSubmit = (e) => {
    e.preventDefault();
    setTimeout(() => {
    this.setState({ showLoaderForPayment: true });
    const { collectJs } = this.state;
    collectJs.startPaymentRequest();
    this.setState({ isPaymentRequestCalled: true });
  }, 500);
};

或者您可以使用async-await 。

handleCardSubmit = async (e) => {
    e.preventDefault();
    await setdata();

    setdata() {
    this.setState({ showLoaderForPayment: true });
    const { collectJs } = this.state;
    collectJs.startPaymentRequest();
    this.setState({ isPaymentRequestCalled: true });
}
};