Fire clicks inside of setInterval only one time with jQuery or Javascript

Question

A website shows a cookie consent after arround 1-2 seconds, if a user has not give a consent. That means, the consent is not in the source directly but in the dom after 1-2 seconds.

I have to detect if a user clicks on a button inside of the consent div. If I use the document ready function, the click is not detected. I have to use setInterval because setTimeout doesn't work. The reason is that another window has to be opened in the Consent and therefore I cannot use a fixed time as with a timeout.

The Consent div is sourrended by a div with the class name "cmp-consent". I check the dom with setInterval every 1800ms for that div. If the div is not existend after 1800ms the user has already given the consent and I clear the setInterval.

BUT:

If the div exists, it waits until the user clicks on the second button in the consent header. When this click is made, another click is made and the window is closed. This is working very well.

The problem is, if a user does not click this button (consent-header button: eq (1)) immediately, the setInterval will of course continue to run. You can see the counter in front of the console.log is increasing. If a user then clicks the button, the subsequent clicks are carried out as often as there is a setInverval. This takes too long if a user waits, for example, longer then a minute. The question is, how do you manage that an action is only carried out once in a setInterval.

Here is my script:

var userConsent = window.setInterval(function() {
if ($(".cmp-consent")[0]){

console.log('consent exists');  

    $( ".consent-header button:eq(1)" ).click(function(){   

        console.log('User clicked the button');
        $(".primary button").click();
        $(".close-icon").click();           

        window.clearInterval(userConsent);
    });


} else {

console.log('consent given, remove interval');
window.clearInterval(userConsent);

} 

}, 1800);

You don't have to use `setInterval`, use event delegation instead. https://stackoverflow.com/questions/25248286/native-js-equivalent-to-jquery-delegation — cloned, Dec 22 '21 at 13:35
You have a lot of a text but you don't have a working example for people to understand your question clearly. You may use the [code snippet](https://meta.stackoverflow.com/a/356679/14032355) in SO and provide a working example for people to investigate your question more easily. — ikhvjs, Dec 22 '21 at 13:41
@cloned thank you very much. To get rid of setInterval would be great. I tried it with delegation but I dont get it. Ikhvjs thank you very much also for getting into. I couldnt provide a example, because the consent is not showing here. Please ask me everything, I will try to explain it again. In short, I want, that everything after the .consent-header button:eq(1) click is fired only 1 time instead of many times. — labu77, Dec 22 '21 at 13:45

score 0 · Accepted Answer · answered Dec 22 '21 at 14:17

Here is a working example of @cloned's suggustion.

document.addEventListener("click", function(e) {
    for (var target=e.target; target && target!=this; target=target.parentNode) {
    // loop parent nodes from the target to the delegation node
        if (target.matches('.consent-header')) {
            handler.call(target, e);
            break;
        }
    }
}, false);

function handler() {
  console.log('do stuff');
}

<div class="consent-header">
<button>I agree</button>  
</div>

wow, this is awesome. It works like a charm. Thank you very much Jonathan. Is this method better and saver on the longterm instead of interval? — labu77, Dec 23 '21 at 15:34

Fire clicks inside of setInterval only one time with jQuery or Javascript

1 Answers1