我需要禁用submit按鈕，單擊按鈕時需要在10 分鐘后啟用它。
我使用local storage來存盤值。
問題是，一旦頁面重新加載。我看不到Submit按鈕被禁用。不確定，為什么會發生。
HTML：
<form method="post" action="someURL">
<input type="submit" id="btnSubmit" />
</form>
JS：
const Button = document.querySelector("#btnSubmit");
Button.addEventListener("click", () => {
Button.disabled = true;
localStorage.setItem("only_once", "true");
setTimeout(() => {
Button.removeAttribute('disabled');
}, 60000);
});
if (!localStorage.getItem("only_once")) {
Button.removeAttribute('disabled');
}
即使在重新加載頁面后，button我也需要禁用10 分鐘。
有人可以幫忙嗎？非常感謝。
uj5u.com熱心網友回復：
在重繪 期間卸載頁面時，您的句柄setTimeout()將被銷毀，因此永遠不會發生。
如果您希望此邏輯跨越頁面加載邊界，您將需要使用替代邏輯。這方面的一個例子是存盤應該重新啟用按鈕的確切日期/時間，然后在頁面加載時使用 1 秒延遲間隔來檢查該時間是否已經過去。如果沒有，請禁用該按鈕，如果有，請啟用該按鈕并取消間隔。
const button = document.querySelector("#btnSubmit");
const buttonExpirationDataKey = 'button-disabled-expiration';
let startButtonStateCheck = () => {
button.dataset.interval = setInterval(updateButtonState, 1000);
}
let updateButtonState = () => {
let expirationDate = new Date(button.dataset.enabledAt);
if (expirationDate < new Date()) {
button.disabled = false;
clearInterval(button.dataset.interval);
} else {
button.disabled = true;
}
}
let buttonDisableExpiration = localStorage.getItem(buttonExpirationDataKey);
if (!buttonDisableExpiration) {
// no button state in localStorage, enable button
button.disabled = false;
} else {
// button state held in localStorage, check every 1s for expiration to enable the button again
button.dataset.enabledAt = buttonDisableExpiration;
updateButtonState();
startButtonStateCheck();
}
button.addEventListener("click", () => {
button.disabled = true;
let now = new Date();
let expirationTime = 1000 * 10; // 10 seconds for this demo
let expirationDate = new Date(now.getTime() expirationTime);
localStorage.setItem(buttonExpirationDataKey, expirationDate);
button.dataset.enabledAt = expirationDate;
startButtonStateCheck();
});
這是jdFiddle中的一個作業示例，因為 SO 片段被沙盒化并且不允許訪問 localStorage。要查看效果，請右鍵單擊右下方視窗并選擇“重新加載幀”。該按鈕將保持禁用狀態，并在設定的到期日期過后啟用。請注意，我在演示中將過期時間設定為 10 秒，以使效果更易于測驗，但這很容易更改。
在這一點上還值得注意的是，如果您的計劃是將時間檢查邏輯保留在客戶端，那么繞過它將非常容易。確保您的服務器端業務邏輯驗證當前請求與用戶發出的最后一次合法請求之間的時間間隔。
uj5u.com熱心網友回復：
我不能評論所以我會在這里發帖
您需要獲取表單元素并防止默認
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/493655.html
標籤：javascript html jQuery