尝试在Javascript中的循环中做两件事

时间:2017-06-23 11:18:16

标签: javascript function setinterval

我在Javascript中编写了一个带有2个函数的脚本。 模具首先在随机位置显示随机图片 这很好用

第二个脚本必须"清理" everthing并将所有内容放回Startposition。

我的脚本此时:

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);
});

如何运行脚本 a)制作图片

b)等待5或n秒

c)清理

然后回到a)?

3 个答案:

答案 0 :(得分:2)

您的done变量应在setInterval执行的匿名函数之外声明。现在,每次函数触发时都会重新声明,因此if / else分支无用。

示例代码:

$(function() {

    var pictureShown = false;
    var interval = 5000;

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

});

修改:我调整了您的setInterval代码以使其正常工作,但整个设置可以大大简化 - 请参阅Adder的回复。

答案 1 :(得分:1)

感谢民众,我明白了

这是我的Code巫婆对我来说很好。 Ich改变了clearPics功能的位置。

所以我不必等待5秒到下一张图片: - ?

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);
});

答案 2 :(得分:0)

我认为代码可以简化。据我所知,你提供的功能信息可以告诉我们。

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

这将首先清除图片,然后每隔2000毫秒重新显示一组带有makePics的新图片。