CODEWITHSUNDEEP
javascriptfunctionsetinterval
User__42
User__42

Reputation: 130

Tryin to do two things in a Loop in Javascript

I wrote a script in Javascript with 2 functions. Die first shows random pictures in an random position This works fine

The second script has to "clear up" everthing and put everything back to the Startposition.

My script at this time:

function clearPics(){

    $("img[class^='mapic']").attr('src','empty100.jpg');
    $("img[class^='mapic']").attr("title",'');
    $("img[class^='mapic']").attr("alt",'');
}


    function makePics(){
// 1 Step take 5 different Pics
var MAAuswahlArr = [];
var AnzahlAnzeige = 5;
var lauf = AnzahlAnzeige
while (lauf > 0){
    var testvar = getRandomInt(0,MAArr.length-1);
    if (contains.call(MAAuswahlArr, testvar)){
    }else{
        MAAuswahlArr.push(testvar);
        lauf--;
    }
}

// 2 Step get 5 of 10 different positions 
var BildanzahlMax           = 10
var BildanzahlArr           = [];
var BildPositionenbesetzt   = 5;
lauf = BildPositionenbesetzt;
while (lauf > 0){
        var testvar = getRandomInt(0,BildanzahlMax);
        if (contains.call(BildanzahlArr, testvar)){
    }else{
        BildanzahlArr.push(testvar);
        lauf--;
    }
}   


// 3 step: take 5 Pics an put ist in the src the alt and title Tags  
  lauf = BildanzahlMax;
  while (lauf > 0){
  var className = "mapic"+lauf;
    if (contains.call(BildanzahlArr, lauf)){
        $('.'+className).attr('src',MAArr[lauf-1][2]);
        $('.'+className).attr("title",MAArr[lauf-1][1]);
        $('.'+className).attr("alt",MAArr[lauf-1][0]);
    }
  lauf--;
  }
// 4. step: make the Pics Hover
  $("img[class^='mapic']").hover(function() {
        var maName = $(this).attr("title");
        var mafunktion = $(this).attr("alt");
        $('.matextblock').html("<h3> Unser Team</h3> <p class='maName'>"+mafunktion+"</p><p class='maFunktion'>"+maName+"</p>");
        console.log('huhu rein');

    }, function() {
        $('.matextblock').html('');
    });
    return true;
    }
$(document).ready(function() {  
setInterval(function(){
   var done = makePics();
    console.log(done);  
    if (done){ 
        clearPics();
        //console.log('clear');
     }else{
        done = false;
    }
    },2000);
});

How can I run the script to a) make the Picture

b) wait 5 or n seconds

c) clear up

and go back to a) ?

Upvotes: 1

Views: 113

Answers (3)

User__42
User__42

Reputation: 130

Thank Folks I got it

this is my Code witch workls fine for me. Ich change the positio for the clearPics funtion.

So I do not have to wait 5 Seconds to the next Pictures :-?

var done = false;
var interval = 5000;
$(document).ready(function() {  
    setInterval(function(){
        //done = makePics();
        if (done){ 
            done = false;
        }else{
            clearPics();
            done = makePics();
        }
        console.log(done);  
    },interval);
});

Upvotes: 1

Alex
Alex

Reputation: 1177

Your done variable should be declared outside of the anonymous function executed by setInterval. Right now it is redeclared every time the function fires, so the if/else branch is useless.

Exampel code:

$(function() {

    var pictureShown = false;
    var interval = 5000;

    setInterval(function () {
        if(pictureShown) {
            clearPics();
        } else {
            makePics();
            pictureShown = true;
            //OR, if makePics returns true:
            //pictureShown = makePics();
        }
    }, interval);

});

Edit: I adapted your setInterval code to make it work, but the whole setup could be much simplified - see Adder's response.

Upvotes: 2

Adder
Adder

Reputation: 5868

I think the code can be simplified. As far as I can tell from the info on the functions you gave out.

$(document).ready(function() {
    makePics();  
    setInterval(function(){
        clearPics();
        var done = makePics();
    },2000);
}

This will clear the pics first, and then redisplay a new set of Pics with makePics, every 2000 ms.

Upvotes: 0

Related Questions