setTimeout or setInterval?

Question

I am wearing one tooltip plugin in jQuery to modify attributes title="" multi-class. Everything was going fine until I realized a problem - I’m using a button that changes class as it’s clicked, and when this button changes class the tooltip stops working.

Obviously I tried to add to class of the button to which it is changed after being clicked to the same function as the tooltip in Javascript, but this did not work.

So my solution to this was to use a setInterval() to run this function of x in x time for the tooltip to start working again after the class of this button has been modified.

But now I have 2 questions:

• When we use the setInterval() the request for this function is being sent to the server each time it tries to run again, or it is just running on its own Browser Window where the user has?
  (This is a concern related to Bandwidth server)

• I searched and found another way to constantly perform this function using setTimeout who say is a better way to approach the same.

So which of these two solutions will be the best solution to address this and what is the difference between the two?

// setTimeout
(function loopingFunction() {
    $('.like-button').tipsy({fade: true, gravity: 'w'});
    setTimeout(loopingFunction, 500);
})();

// setInterval
setInterval(function(){
    $('.botao-gosto').tipsy({fade: true, gravity: 'w'});
}, 500);

Along with my question here is also an example in Jsfiddle if you can help: http://jsfiddle.net/jdbe0fL7/

Answer 1

This plugin already has options to do this. The syntax according to the documentation is:

$('#example-delay'). Tipsy({delayIn: 500, delayOut: 1000});

An example would be:

$('.like-button').tipsy({
    fade: true,
    gravity: 'w',
    delayIn: 500,    // pausa antes de abrir
    delayOut: 1000   // pausa antes de voltar a fechar
});

Example: http://jsfiddle.net/jdbe0fL7/2/

Of the two solutions you had setInterval it was a bad idea because it runs the code helplessly.

Note / Request for clarification:

In your question you refer "be sent to the server" and "modify title attributes of several classes". Your code does not reflect this, hence my response to the documentation. If the answer is not what you were looking for, try to be more specific. General rule to use the setInterval in this case or in case of communication with the server is rarely the right solution.

Answer 2

I was able to solve the problem - by checking the Parent/wrapper div has the mouse inside it using .hover() instead of the $( document ).ready() that is suggested by the plugin

For example:

$(".parent-wrapper").hover(function() {
    $('.like-button').tipsy({fade: true, gravity: 'w'});
});