I have a simple code like in below snippet to have alert whenever a button is clicked and alert is shown, that runs alright but with certain drawbacks (know that this is how setTimeout works).
Here when you click button 2,3,4 times , than alert is shown that many times only. But I want alert only 1 time which is called from 1st click and ignore further clicks until 3 second are complete for 1st click.
function alertBtn() {
setTimeout(alertFunc, 3000);
}
function alertFunc() {
alert("Alert is clicked so remain alerted");
}<button onclick="alertBtn()">Alert me</button>Is it possible with pure JavaScript way? It's may be similar to method that SO uses like we can't comment again within 5s(or something), the button is kinda disabled for that time interval. Kind of barrier for 5sec
You may use clearTimeout() for that which cancels a timeout previously established by calling 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
Maybe something like this:
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>It sounds like you're looking to do something called throttling. Here's an example of how to implement it:
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;
}
};
};
That throttle function allows you to transform a normal function into a throttled function, which will only be executed the first time it is called in a given delay time (specified in milliseconds to match the behaviour of setTimeout).
It works by creating a new function that sets a timeout the first time it is called, and calls the initial function. Then, if the throttled function is called again before the timeout is finished, it won't call the initial function again.
If you want to throttle your function by 3 seconds, then you should pass the value 3000 as the delay argument so the timeout created lasts for 3 seconds. You can crete only a throttled function by passing an anonymous function to throttle, like this:
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>