Problem with functions being performed multiple times

Question

I would like to know how to remedy this problem. Example:

I have a function of fadeIn/fadeOut. The event that triggers the function is the OnClick in some element. The point is: How to avoid that when I give two clicks or more, the function is executed every time I click, an instance over the other?

Thus, the function performs again and Buga all the effect. I would like to know how to "stop" the office of the function that is already running, and only then run it again, to notice a new click before it completes...

It has something to do with that function (e) { e.preventDefault(); } ?

I don’t know if I explained it well, but whoever understands and can help I am very grateful. See you later.

Answer 1

With a code you could respond better, but basically what you need to do is have a global variable that controls whether it’s already run or not, something like that:

var fadeJaExecutado = false;

the function that will perform the effect:

if (!fadeJaExecutado) {
    //faz o que tem que fazer
    fadeJaExecutado = true;
}

Now if what you want is for him not to perform more than once simultaneously then the solution is different, it would be something like this:

var fadeExecutando = false;

function fade() {
    if (!fadeExecutando) {
        fadeIn();
        fadeExecutando = true;
    } else {
        fadeOut();
        fadeExecutando = false;
    }
}

I put in the Github for future reference.

It may be that part of the logic of fadeIn()/fadeOut() maybe we should bring it to fade(), like the setTimeout(). But it would be better to see the code you’re doing first. I’d better if the question improves.

Answer 2

you can add a class to the element in the click, and check if this class exists

 $('#test-btn').on('click', function(){
        if(!$('#test').hasClass('fadding')){
        $('#test').addClass('fadding').fadeToggle('fast', function(){
        $(this).removeClass('fadding');
      });
    }
  });

I created a jsFiddle with the example

Answer 3

ev.preventDefault() will prevent element default behavior, e.g; ev.preventDefault() in an Event click of a <a> will prevent the link from href='' be called.

If you are using jQuery, Voce can use the property :animated to check whether the element is being animated, e.g:

if (!$('.my-element').is(':animated')) { $('.my-element').fadeToggle(); }

From what I understand of your problem, it would be something like your solution:

$('.my-button').click(function (ev) {
  ev.preventDefault(); // ignore the href='#'

  var $fadeElement = $('.my-fade-element');

  if (!$fadeElement.is(':animated')) {
      $fadeElement.fadeToggle();
  }
});

• http://api.jquery.com/animated-selector/

Answer 4

Friend, look for the standards Throttle and Debounce I believe the article below will help.

Throttle and Debounce