Jquery popup display at once time on the same page

I have set my code like this, that when the page is refreshed it will show a popup and make the counter one. And once the counter is one popup should not be displayed again.

I am having this issue that it is showing and again on the same page and I want it to show the popup on the same page. When then is changed to another, then same process is to be repeated.

var counter = 0;
counter ++;

if(counter == 1)
{
    setInterval(function () {
    $('.popup2, .overlay2').fadeIn();       
}, 1500);
    
}
else {
    $('.popup2, .overlay2').fadeout();
}

I have also tried this code but it is not working

    if ($ .cookie("popup_1_2") == null) {
    setInterval(function () {
        $('.popup2, .overlay2').fadeIn();
    }, 1500);
    $ .cookie("popup_1_2", "2");
}

Answer

You want to be using setTimeout for a single action after a time interval. SetInterval is for infinitely repeating events (until canceled)

I don’t know why you need the counter though. Instead just activate the popup on page load

$(document).ready(function() {
    setTimeout(function () {
       $('.popup2, .overlay2').fadeIn();       
    }, 1500);
})

if The counter was meant to somehow be aware if the same user had come back to the page a second time (and therefore don’t show the popup, you could use localStorage, like

$(document).ready(function() {
    let beentheredonethat = localStorage.getItem('popupviewed')
    if (!beentheredonethat){
       setTimeout(function () {
          $('.popup2, .overlay2').fadeIn();       
       }, 1500);
       localStorage.setItem('popupviewed','true');
    }
})