Ignore function if occurred within x seconds

Question

Since people are misunderstanding my wording, I will rewrite it, I want "with the following code below" to ignore the function which i have commented on below in my jquery if it happened in the last "X" seconds. Here is my code.

EDIT:: Please write answers in reference to this, example. "the script ignores the change in class and the delay wont work" http://www.w3schools.com/code/tryit.asp?filename=FBC4LK96GO6H

Sorry for confusing everyone including myself.

Possible duplicate of [What's the easiest way to call a function every 5 seconds in jQuery?](http://stackoverflow.com/questions/2170923/whats-the-easiest-way-to-call-a-function-every-5-seconds-in-jquery) — Fabian Schultz, Jan 02 '17 at 01:30
@FabianSchultz Unrelated to my question. Completely different. — Dan Ross, Jan 02 '17 at 01:34

Karol Łuckiewicz · Accepted Answer · 2017-01-02T03:50:14.283

2

Edited due to author's post update.

You can create custon event. By this function you will define: "delayedClick" event on the selected objects.

function delayedClickable(selector, delayTime){
  $(document).ready(function(){
    $(selector).each(function () {
      var lastTimeFired = 0;
      $(this).click(function(){
        if(Date.now() - delayTime > lastTimeFired) {
          lastTimeFired = Date.now();
          $(this).trigger('delayedClick');
        }
      });
    });
  });
}

Remeber that you should define delayTime and this event on selected elements by:

var delayTime = 3 * 1000; // 3 sec delay between firing action
delayedClickable('.Img2', delayTime);

And then just use your event on elements. For example click event can be used in that way:

$element.on('click', function () {
  // ...
});

And your custom delayedClick event should be used in that way:

$element.on('delayedEvent', function () {
  // ...
});

Full example: http://www.w3schools.com/code/tryit.asp?filename=FBC56VJ9JCA5

@UPDATE I've found some another tricky way to keep using click function and makes it works as expected:

function delayedClickable(selector, delayTime){
  $(document).ready(function(){
    $(selector).each(function () {
      var scope = this;
      $(this).click(function(){
        scope.style.pointerEvents = 'none';
        setTimeout(function () {
          scope.style.pointerEvents = 'auto';
        }, delayTime);
      });
    });
  });
}

And then

var delayTime = 3 * 1000; // 3 sec delay between firing action
delayedClickable('.Img2', delayTime);

That's all.

The key of second way is that we are disabling any pointer event on element when clicked and then after timeout we're turning these events back to work. https://developer.mozilla.org/en/docs/Web/CSS/pointer-events

And full example: http://www.w3schools.com/code/tryit.asp?filename=FBC678H21H5F

edited Jan 02 '17 at 03:50

answered Jan 02 '17 at 01:44

Karol Łuckiewicz

152
6

Let me test this with my coding however, it worked well with the test when added to the "if" and "else if" – Dan Ross Jan 02 '17 at 01:51
Maybe you would like to wrap the whole `$(".element1").click(function(){ ... }` function with this if (ofc put this if inside, into the function) Try this (previously i've wrapped only switching to red with if, but remember that red is initial value, so in my first example second transition from blue to red will be delayed, i thought you want to delay only swiching from blue to red, because there was a comment). This is version which covers every click: http://codepen.io/anon/pen/LxPrGP – Karol Łuckiewicz Jan 02 '17 at 01:57
Hey I think I've figured out part of my trouble with this, I know it was not written in the original post, but this is all being appended to the body as a script. scripts added that have been appended are ignored when repeated. If not too much to ask, with the original answer you gave, could you explain how I could append all that to the body and have it still function? – Dan Ross Jan 02 '17 at 02:04
So if you really need to declare click event dynamically in head, then you can implement the logic of toggling element in the function and then in head just fire that function. Like here (a little bit refactored): http://www.w3schools.com/code/tryit.asp?filename=FBC4EKS2MFBY – Karol Łuckiewicz Jan 02 '17 at 02:49
I'm sorry, I've changed my coding a bit, would that go the same for this one? http://www.w3schools.com/code/tryit.asp?filename=FBC4LK96GO6H this is a better display of the problem, when you rapidly click on the right side, you will see as the class changes, the script does not care. – Dan Ross Jan 02 '17 at 02:57
Edit, and your newer code does not work for me as it needs to be able to remove the original class and alternate between the two. – Dan Ross Jan 02 '17 at 03:02
I've updated the answer. It should works now as expected. – Karol Łuckiewicz Jan 02 '17 at 03:22
Perfffffeeect. However i don't fully understand it, is there some documentation you could link me perhaps? – Dan Ross Jan 02 '17 at 03:38
The second way which i've added is easier. In short: 1. Define function `delayedClickable` which will select elements by jQuery selector (like ".Img2"), 2. many objects can have "Img2" class so many objects can be selected by selector, so we need to iterate on each selected object to enable click delay for it. 3. After click, every pointer event (such as click or tap) is disabled for the element. 4. And we also setiing timeout with delay to enable click after delay is completed. Thats all. – Karol Łuckiewicz Jan 02 '17 at 03:49
In first way i've used custom jQuery events. http://api.jquery.com/trigger/ – Karol Łuckiewicz Jan 02 '17 at 03:58

score 1 · Answer 2 · answered Jan 02 '17 at 02:57

1

Can use setTimeout() to change a flag variable and a conditional to check flag in the event handler

var allowClick = true,
    delaySeconds = 5;
$(".element1").click(function(){
   if(!allowClick){
      return; // do nothing and don't proceed
   }
   allowClick = false;
   setTimeout(function(){
      allowClick = true;
   }, delaySeconds * 1000 );

   // other element operations
})

answered Jan 02 '17 at 02:57

charlietfl

170,828
13
121
150

http://www.w3schools.com/code/tryit.asp?filename=FBC4LK96GO6H will it work with this? – Dan Ross Jan 02 '17 at 03:05
why wouldn't it...did you try? – charlietfl Jan 02 '17 at 03:06
See for yourself, I am fairly new to jquery and all, if you see the problem I'm having, you will understand better I think. I tried it but i think the bigger problem is something else within the jquery. – Dan Ross Jan 02 '17 at 03:10

Ignore function if occurred within x seconds

2 Answers2