Disable a pop up link for 5 seconds using javascript

Question

For a project I need to print a document using PHP code. Currently I have a self closing pop up to start the print.

The only problem I have is that a user could spam the button creating a lot of print requests and a huge queue.

The code I have right now:

function newPopup(url) {
popupWindow = window.open(
url,'popUpWindow','height=10,width=100,left=10,top=10,resizable=no,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=no');    // Verstop op achtergrond
popupWindow.blur();
}
<a href="JavaScript:newPopup('print.php');">Print</a>

I have found some code to stop links but I have problems implementing these since I already call it as a pop up.

Answer 1

You can use a flag:

var flag=true;
function newPopup(url) {
  if(flag) {
    window.open(...).blur();
    flag=false;
    window.setTimeout(function(){flag=true;},5*1000);
  }
}

Not a "good" solution (uses a global variable), but it should work.

Answer 2

You may disable the link before you open the popup and then re-enable it after five seconds. The problem is that to enable/disable a link can't be done in a very portable way. To workaround this you have to save the actual link, replace it with a fake one and then re-enable it later (when interval elapsed). Like this:

function newPopup(url) {
    // Save current link and replace it with a fake one
    var oldLink = $("#linkid").attr("href");
    $("#linkid").attr("href", "#");

    setinterval(function() {
        // Restore true link
        $("#linkid").attr("href", oldLink);
    }, 5000);

    // ...
}

You can extract this code to a separate function temporaryDisableLink(id, timeout) to reuse it for many different links (without polluting all other code).

Now let's explore other solutions.

Your HTML code must be updated to (in case you want to reuse the same function for many links otherwise you do not need to pass the link id parameter) to:

<a id="link-print" 
   href="JavaScript:newPopup('#link-print', 'print.php');">
   Print
</a>

The pointer-events CSS property isn't supported by IE (and Opera) so I can't suggest to use it in real world. Anyway it's:

function newPopup(id, url) {
    $(id).css("pointer-events", "none");

    setinterval(function() {
        $(id).css("pointer-events", "auto");
    }, 5000);

    // ...
}

Because you're using JavaScript to open the pop-up you may consider to change a little bit the function to use a custom disabled attribute (or to check for pointer-events if you plan to use them together):

function newPopup(id, url) {
    if ($(id).attr("disabled") == "disabled") {
        return false;
    }

    $(id).attr("disabled", "disabled");
    setinterval(function() {
        $(id).removeAttr("disabled");
    }, 5000);

    // ...
}

Answer 3

<script>
    function newPopup(url) {
        setTimeout(function () {
            popupWindow = window.open(
url, 'popUpWindow', 'height=10,width=100,left=10,top=10,resizable=no,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=no');    // Verstop op achtergrond
            popupWindow.blur();
        },5000
        );
    }
</script>
<a href="JavaScript:newPopup('print.php');">Print</a>