How to set number of times the setInterval will be executed?

Asked

Viewed 1,160 times

7

It is possible to control the number of executions of setInterval? I made a script very simple where I wanted to div flash 3x to alert the user. But in script that I made it keeps blinking straight.

<div id="my-div">alerta teste</div>

setInterval(function(){
      $('#my-div').animate({'opacity':'toggle'})
},250);
javascript jquery setinterval

3 answers

13


You can create a flag that checks how many times that code has been run.

Something like that:

var qtd = 0;
var pisca = setInterval(function () {
    $('#my-div').animate({
        'opacity': 'toggle'
    })
    qtd++;
    if (qtd > 3) clearInterval(pisca);
}, 250);

So every time the setInterval is run the variable qtd plus 1. Within the setInterval the condition if checks the value and "shutdown" the setInterval when the condition gives true.

An example would be: http://jsfiddle.net/kq4vavg2/


Alternative with callback:

var qtd = 6;

function pisca() {
    if (qtd--) $('#my-div').animate({
        'opacity': 'toggle'
    }, pisca);
}
pisca();

See on JS Fiddle

  • And how would I delimit the spread of this event? For example. I click on a button that calls a popup that is applied this effect and if I click on the button more than once it will repeat the animation. I tried using a . stop(true) before Animate but so it does not apply the blinking effect

  • @Gabrielschmidtcorderly can you explain better what you want to do and it’s not working? do you mean to say that by clicking several times you want it not to accumulate? or do you want it to be just once and never again? or do you mean other buttons?

  • I want it not to accumulate when I click several times

  • 1

    @Gabrielschmidtcordeiro is what you’re looking for? -> http://jsfiddle.net/m5k3k86j/

  • 1

    Here is an example: http://jsfiddle.net/ivanferrer/ra0n3duz/

  • 1

    That’s right Sergio, perfect. Thank you very much

  • @Gabrielschmidtcordeiro anything! I’m glad to help

Show 2 more comments

6

The @Sergio reply answers exactly what was asked, but is as a complementary suggestion setTimeout, which may be more interesting than the setInterval in your specific case, and simplifies the syntax:

var qtd = 5;
function pisca(){
    $( '#my-div').animate({ 'opacity': 'toggle' } )
    if (qtd--) setTimeout( pisca, 250 );
}
setTimeout( pisca, 250 );
Demonstração:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="my-div">TESTE</div>

  • How do I stop when I click numerous times it does not accumulate the clicks?

2

In function form:

function setIntervalLimit(func, time, limit){
    var n = 0; // CRIA UM CONTADOR INTERNO
    var f = function(){ // CRIA UM FUNCAO INTERNA
        func();
        n++;
        if(n < limit){ // VEFIFICA CONTAGEM
            setTimeout(f, time); // REALIZA LOOP
        }
    }
    f(); // CHAMA A FUNÇÃO INTERNA 1ª VEZ
}

setIntervalLimit(function(){
    alert('a');
}, 1000, 3);

The operation is similar to the SetTimeout, however with a third parameter to say the number of executions.

Obs

limit should be > 0, otherwise generates loopinfit.

Browser other questions tagged javascript jquery setinterval

You are not signed in. Login or sign up in order to post.