我有一個像下面的代碼片段一樣的簡單代碼，每當單擊按鈕并顯示警報時都會發出警報，運行正常但有某些缺點（知道這是如何setTimeout作業的）。
在這里，當您單擊按鈕 2、3、4 次時，警報僅顯示多次。但我只希望從第一次點擊呼叫警報 1 次，并忽略進一步的點擊，直到第一次點擊完成 3 秒。
function alertBtn() {
setTimeout(alertFunc, 3000);
}
function alertFunc() {
alert("Alert is clicked so remain alerted");
}<button onclick="alertBtn()">Alert me</button>是否可以使用純 JavaScript 方式？它可能類似于SO使用的方法，例如我們無法在 5 秒（或其他）內再次發表評論，該按鈕在該時間間隔內被禁用。5秒的障礙物
uj5u.com熱心網友回復：
您可以使用clearTimeout()for 取消先前通過呼叫建立的超時setTimeout()
let time;
let clicked = false;
function alertBtn() {
if (!clicked){
clicked = true;
clearTimeout(time);
time = setTimeout(alertFunc, 3000);
}
}
function alertFunc() {
alert("Alert is clicked so remain alerted");
clicked = false;
}<button onclick="alertBtn()">Alert me</button>clearTimeout- https://developer.mozilla.org/en-US/docs/Web/API/clearTimeout
JavaScript 中的去抖動和節流
uj5u.com熱心網友回復：
聽起來您想要做一些叫做throttling 的事情。下面是一個如何實作它的例子：
const throttle = function (fn, delay) {
let timeout;
return function (...args) {
if (!timeout) {
const returnVal = fn.apply(this, args);
timeout = setTimeout(() => {
timeout = undefined;
}, delay);
return returnVal;
}
};
};
該throttle函式允許您將普通函式轉換為節流函式，該函式僅在給定delay時間內第一次呼叫時執行（以毫秒為單位指定以匹配 的行為setTimeout）。
它的作業原理是創建一個新函式，該函式在第一次呼叫時設定超時，并呼叫初始函式。然后，如果在超時完成之前再次呼叫受限制的函式，則不會再次呼叫初始函式。
如果您想將您的函式限制 3 秒，那么您應該將該值3000作為delay引數傳遞，以便創建的超時持續 3 秒。通過將匿名函式傳遞給throttle，您可以只創建一個節流函式，如下所示：
const throttle = function (fn, delay) {
let timeout;
return function (...args) {
if (!timeout) {
const returnVal = fn.apply(this, args);
timeout = setTimeout(() => {
timeout = undefined;
}, delay);
return returnVal;
}
};
};
const alertBtn = throttle(function () {
alert("Alert is clicked so remain alerted");
}, 3000);<button onclick="alertBtn()">Alert me</button>uj5u.com熱心網友回復：
也許是這樣的：
let clickedOnce = false;
function alertBtn() {
if (!clickedOnce) {
clickedOnce = true;
setTimeout(alertFunc, 3000);
}
}
function alertFunc() {
alert("Alert is clicked so remain alerted");
clickedOnce = false;
}<button onclick="alertBtn()">Alert me</button>uj5u.com熱心網友回復：
最簡單的方法是通過 簡單地控制按鈕disabled狀態setTimeout。處理程式確實負責執行alertFunc和禁用單擊按鈕并啟動后者的時移活動狀態......
function alertFunc() {
alert("Alert is clicked so remain alerted");
}
function controlButtonAbility(btn) {
btn.disabled = true;
setTimeout(() => btn.disabled = false, 5000);
}
function handleButtonClick(evt) {
const btn = evt.currentTarget;
controlButtonAbility(btn);
alertFunc();
}
document
.querySelector('button')
.addEventListener('click', handleButtonClick);<button>Alert me</button>編輯
“不錯的解決方案，感謝您的回應（ 1）。但是警報也可以在 3 秒后執行”
當然 ...
function alertFunc() {
alert("Alert is clicked so remain alerted");
}
function controlButtonAbility(btn) {
btn.disabled = true;
setTimeout(() => btn.disabled = false, 5000);
}
function handleButtonClick(evt) {
const btn = evt.currentTarget;
controlButtonAbility(btn);
// alertFunc();
setTimeout(alertFunc, 2000);
}
document
.querySelector('button')
.addEventListener('click', handleButtonClick);<button>Alert me</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/343827.html
標籤：javascript html