JavaScript, переопределяющий цикл - PullRequest
Новая
       7

JavaScript, переопределяющий цикл

0 голосов
/ 29 февраля 2012

Это может быть нелепо, спрашивать о таком огромном количестве кода ... но в целом у меня есть целый раздел, который просматривает 4 элемента содержимого. это отлично работает Тогда у меня есть раздел, если вы наводите курсор на элемент div, этот раздел будет оставаться активным, или если вы нажмете элемент div, он останется постоянно активным. этот бит работает сам по себе. но когда я объединяю их, у меня возникает проблема, что цикл всегда будет работать, даже если вы зависаете, потому что цикл никогда не останавливается.

Теперь есть способ сделать зависание и щелчок битом, а также приостановить цикл. по сути, я пытаюсь написать свою уменьшенную версию всех этих слайдеров, которые вы видите в интернете.

спасибо. 

$(window).load(function(){
var clicked = 0;
var i = 1;                    
var j = (i - 1);

function myLoop () {       
setTimeout(function () {
   if (clicked == 0) {
$("#nHstuff4").hide();$("#nHpicture4").hide();
$("#nH4").removeClass("active"); 

$("#nHstuff" + j).hide();$("#nHpicture" + j).hide();     
$("#nH" + j).removeClass("active");

$("#nHstuff" + i).show();$("#nHpicture" + i).show();
$("#nH" + i).addClass("active");

        i++;
        j++;

  if (i < 5) {        
     myLoop();        
  }   
  else if (i == 5) {
      i = 1;
      j = 0;
      myLoop();
  } 
   }else{} } ,3000);
}

myLoop();                     

$("#nH1").click(function() {
    if (clicked == 0) {
        clicked = 1;
        $("#nH1").addClass("active");
    }else if (clicked == 1) {
        $(".nHstuff").hide();
        $(".nH").removeClass("active");
        clicked = 0;
    }
});
    $("#nH2").click(function() {
    if (clicked == 0) {
        clicked = 1;
        $("#nH2").addClass("active");
    }else if (clicked == 1) {
        $(".nHstuff").hide();
        $(".nH").removeClass("active");
        clicked = 0;
    }
});
    $("#nH3").click(function() {
    if (clicked == 0) {
        clicked = 1;
        $("#nH3").addClass("active");
    }else if (clicked == 1) {
        $(".nHstuff").hide();
        $(".nH").removeClass("active");
        clicked = 0;
    }
});
    $("#nH4").click(function() {
    if (clicked == 0) {
        clicked = 1;
        $("#nH4").addClass("active");
    }else if (clicked == 1) {
        $(".nHstuff").hide();
        $(".nH").removeClass("active");
        clicked = 0;
    }
});

$("#nH1").hover(function() {if (clicked == 0) {
    $("#nH1stuff").show();$("#nH1picture").show();
}else{}},function(){
    if (clicked == 0) {
    $("#nH1stuff").hide();$("#nH1picture").hide();
    }
    else {}
});

$("#nH2").hover(function() {if (clicked == 0) {
    $("#nH2stuff").show();$("#nH2picture").show();
}else{}},function(){
    if (clicked == 0) {
    $("#nH2stuff").hide();$("#nH2picture").hide();
    }
    else {}
});

$("#nH3").hover(function() {if (clicked == 0) {
    $("#nH3stuff").show();$("#nH3picture").show();
}else{}},function(){
    if (clicked == 0) {
    $("#nH3stuff").hide();$("#nH3picture").hide();
    }
    else {}
}); 

$("#nH4").hover(function() {if (clicked == 0) {
    $("#nH4stuff").show();$("#nH4picture").show();
}else{}},function(){
    if (clicked == 0) {
    $("#nH4stuff").hide();$("#nH4picture").hide();
    }
    else {}
});
});

Ответы [ 2 ]

0 голосов
/ 29 февраля 2012

Сохраните значение timerID в переменной. 

var loopTimer = 0;
function myLoop() {
   loopTimer = setTimeout(function() {
      //All your loop code
   }, 30000);
}

Сбросьте тайм-аут при наведении курсора и перезапустите его при наведении мыши: 

$("#nH1").hover(function() {if (clicked == 0) {
   hovering = true;
    $("#nH1stuff").show();$("#nH1picture").show();
   clearTimeout(loopTimer);
    }
  },function() {
    hovering = false;
    if (clicked == 0) {
    $("#nH1stuff").hide();$("#nH1picture").hide();
    myLoop(); //restart your loop
    }
 });

Регулярно изучайте использование setIntervalзапланированные события на известном интервале.Это сделает код немного легче для понимания.

0 голосов
/ 29 февраля 2012

Попробуйте это ... 

$(window).load(function(){
var clicked = 0;
var i = 1;                    
var j = (i - 1);
var hovering = false;

function myLoop () {       
setTimeout(function () {
    if (hovering) return;
   if (clicked == 0) {
$("#nHstuff4").hide();$("#nHpicture4").hide();
$("#nH4").removeClass("active"); 

$("#nHstuff" + j).hide();$("#nHpicture" + j).hide();     
$("#nH" + j).removeClass("active");

$("#nHstuff" + i).show();$("#nHpicture" + i).show();
$("#nH" + i).addClass("active");

        i++;
        j++;

  if (i < 5) {        
     myLoop();        
  }   
  else if (i == 5) {
      i = 1;
      j = 0;
      myLoop();
  } 
   }else{} } ,3000);
}

myLoop();                     

$("#nH1").click(function() {
    if (clicked == 0) {
        clicked = 1;
        $("#nH1").addClass("active");
    }else if (clicked == 1) {
        $(".nHstuff").hide();
        $(".nH").removeClass("active");
        clicked = 0;
    }
});
    $("#nH2").click(function() {
    if (clicked == 0) {
        clicked = 1;
        $("#nH2").addClass("active");
    }else if (clicked == 1) {
        $(".nHstuff").hide();
        $(".nH").removeClass("active");
        clicked = 0;
    }
});
    $("#nH3").click(function() {
    if (clicked == 0) {
        clicked = 1;
        $("#nH3").addClass("active");
    }else if (clicked == 1) {
        $(".nHstuff").hide();
        $(".nH").removeClass("active");
        clicked = 0;
    }
});
    $("#nH4").click(function() {
    if (clicked == 0) {
        clicked = 1;
        $("#nH4").addClass("active");
    }else if (clicked == 1) {
        $(".nHstuff").hide();
        $(".nH").removeClass("active");
        clicked = 0;
    }
});

$("#nH1").hover(function() {if (clicked == 0) {
    hovering = true;
    $("#nH1stuff").show();$("#nH1picture").show();
}else{}},function(){
    hovering = false;
    if (clicked == 0) {
    $("#nH1stuff").hide();$("#nH1picture").hide();
    }
    else {}
});

$("#nH2").hover(function() {if (clicked == 0) {
    hovering = true;
    $("#nH2stuff").show();$("#nH2picture").show();
}else{}},function(){
    hovering = false;
    if (clicked == 0) {
    $("#nH2stuff").hide();$("#nH2picture").hide();
    }
    else {}
});

$("#nH3").hover(function() {if (clicked == 0) {
    hovering = true;
    $("#nH3stuff").show();$("#nH3picture").show();
}else{}},function(){
    hovering = false;
    if (clicked == 0) {
    $("#nH3stuff").hide();$("#nH3picture").hide();
    }
    else {}
}); 

$("#nH4").hover(function() {if (clicked == 0) {
    hovering = true;
    $("#nH4stuff").show();$("#nH4picture").show();
}else{}},function(){
    hovering = false;
    if (clicked == 0) {
    $("#nH4stuff").hide();$("#nH4picture").hide();
    }
    else {}
});
});

Я просто добавил переменную hovering и установил для нее значение true при наведении курсора и false, когда нет.Затем я добавил условный возврат в тайм-аут.(Это похоже на то, что вы сделали с clicked, но с использованием логического значения, а не целого числа).

Есть лучший способ сделать тайм-аут.Вы можете использовать setInterval, чтобы вам больше не приходилось звонить, а затем вы могли clearInterval при зависании и делать еще один setInterval, когда вы перестали зависать.Что у вас будет работать, хотя.Просто поиграйте в поисках setInterval, так как это больше подходит для чего-то подобного.

Кстати, спасибо за создание вашей собственной версии и обучение тому, как это сделать, вместо того, чтобы просто использовать плагин.обычно очень удобно, но вы не можете победить, зная, как сделать это самостоятельно!

...