JavaScriptがループをオーバーライドする

Question

これは多分、このような膨大なコードについて尋ねるのは難しいかもしれませんが、基本的には4つのコンテンツをループするセクションがあります。それはうまく動作します。それから私は、あなたがdiv上にマウスを置くと、そのセクションはアクティブのままになるか、またはdivをクリックすると、常にアクティブになります。そのビットはそれだけでも機能します。しかし、私はそれらを組み合わせるとき、ループが決して停止しないので、あなたがホバリングしていてもループが常に機能するという問題があります。

ここで、ホバーとクリックビットを作成してループセクションを一時停止する方法はありますか？ essentailly私はあなたがinternetzで見るすべてのスライダーの自分の小さなバージョンをコードしようとしている

ありがとう。

$(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 {} 
}); 
}); 

Answer 1

$(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に設定します。次にタイムアウトで条件付きリターンを追加しました。 （これはclickedの場合と似ていますが、整数ではなくブール値を使用しています）。

タイムアウトを行うより良い方法があります。 setIntervalを使用すると、引き続き呼び出す必要はなく、ホバーするとclearIntervalになり、ホバーを止めるともう1つsetIntervalになります。あなたが持っているものは、しかし、動作します。ちょうどこのようなものに適しているので、ちょうどsetIntervalでグーグルグーグルをしてください。

ちなみに、プラグインを使用するのではなく、独自のバージョンを作成し、それを行う方法を学ぶための名誉:)プラグインは素晴らしいですが、通常は非常に便利ですが、自分で行う方法を知ることはできません！

Answer 2

変数にtimerIDの値を保存します。

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

クリアホバーにタイムアウトして再起動したときにマウスアウト：知ら間隔で定期的にスケジュールされたイベントのためのsetIntervalを使っへ

$("#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 
    } 
}); 

ルック。コードを少し分かりやすくします。