CODEWITHSUNDEEP
javascriptdom-eventsmouseevent
Alien128
Alien128

Reputation: 313

Javascript: how to stop the click event queuing?

The following code works fine the only problem is that the click event get queued like for example the setTimeout gets called for each click and the popup appears multiple times. How to make the popup appear only when user clicks and to ensure that gap between each popup is lets say 4 seconds

var showpopup = 1;
var check = true;
var seconds = 4000;             // change the frequency here current frequency = 2 seconds
var url = "https://www.fb.com"; // change the url here
var strWindowFeatures = "toolbar=yes,scrollbars=yes,resizable=yes,top=0,left=0,width=" +screen.width 
                         + ",height=" +screen.height;
function popup (event)
{   
     event.stopPropagation();
     if (showpopup === 1)
     {
          //if 
(navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Windows 
Phone|Opera Mini|IEMobile/i))
          //{
                if (check == true)
                {
                      window.open(url , '_blank' , strWindowFeatures);
                      showpopup++;
                      check = false;
                }
          //}
     }
     else
     {
         setTimeout(checkValue, seconds);   
     }
}

function checkValue ()
{
    showpopup = 1;
    check = true;
}

window.onclick = popup(event);

Upvotes: 0

Views: 813

Answers (3)

Jonas Wilms
Jonas Wilms

Reputation: 138267

This is called function throttling :

function throttle(func){
  var timeout=null;
  return function(...args){
    if(!timeout) func(...args), timeout=setTimeout(_=>timeout=null,4000);//if were not waiting, execute the function and start waiting
  }
}

So you can do

var alert=throttle(window.alert);

alert("Wohoo!");
alert("Never executed!");

In your case it would be:

window.onclick = throttle(popup);

My Syntax is maybe a bit complicated (ES6), so lets explain it a bit:

return function(...args){

return a new function that stores all arguments in the args Array ( So that we can pass it to our inner function)

    if(!timeout)

If theres no Timeout

func(...args),

call the function, passing our args array as parameters ( called spread operator)

timeout=setTimeout(...,4000)

set our timeout to execute after 4000 to execute the following:

_=>timeout=null

When the timeout finishes, reset the timeout and wait for the next function call...

Upvotes: 3

Alien128
Alien128

Reputation: 313

The following code solves the problem without using throttle

// JavaScript Document

var showpopup = 1;
var check = true;
var seconds = 4000;             // change the frequency here current frequency = 2 seconds
var url = "https://www.fb.com"; // change the url here
var strWindowFeatures = "toolbar=yes,scrollbars=yes,resizable=yes,top=0,left=0,width=" +screen.width + ",height=" +screen.height;

function popup ()
{   
    if (check === false)
    {   
         return;
    } 
    else if (showpopup === 1)
    {
         if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Windows Phone|Opera Mini|IEMobile/i))
         {
              if (check == true)
              {
                    window.open(url , '_blank' , strWindowFeatures);
                    showpopup++;
                    check = false;
                    setTimeout(checkValue , seconds);
              }
         }
    }
}

function checkValue ()
{
     showpopup = 1;
     check = true;
}

window.onclick = popup;

Upvotes: 0

hackio
hackio

Reputation: 796

Lodash has a throttle function for this.

_.throttle(func, [wait=0], [options={}])

Upvotes: 0

Related Questions