javascript/jQueryを使用して、タイマーで3つの異なるクリックイベントを自動化

Question

下記のタイマーで定義されたクリックイベントを自動化する必要があります。 5〜6秒ごとに言ってください。したがって、ページは「長寿」から始まり、ユーザーのクリックはループ上のjavascriptを使用してシミュレートされます。ユーザーがタブを手動でクリックすると、ループは停止します。何か案は ？

<script type="text/javascript"> 
     $("document").ready(function(){ 
     $("#integrity").click(function(){ 
      $('#home_image').removeClass('bg2 , bg3').addClass('bg1'); 
     }); 
     }); 

     $("document").ready(function(){ 
     $("#quality").click(function(){ 
      $('#home_image').removeClass('bg1 , bg3').addClass('bg2'); 
     }); 
     }); 

     $("document").ready(function(){ 
     $("#longevity").click(function(){ 
      $('#home_image').removeClass('bg1 , bg2').addClass('bg3'); 
     }); 
     }); 
     </script> 

Answer 1

ループの代わりにsetIntervalを使用します。各タブのコードを独自の関数でカプセル化します。タブ間を循環するように、setTimeoutを使用してそれぞれの間隔を設定します。ユーザーがタブをクリックしたときに間隔をクリアするために使用できるように、setIntervalからの戻り値を保存します。

$(document).ready(function(){ 
    function integrity(){ 
     $('#home_image').removeClass('bg2 , bg3').addClass('bg1'); 
    } 


    function quality(){ 
     $('#home_image').removeClass('bg1 , bg3').addClass('bg2'); 
    } 

    function longevity(){ 
     $('#home_image').removeClass('bg1 , bg2').addClass('bg3'); 
    } 

    var integrityInterval; 
    setTimeout(function(){integrityInterval = setInterval(integrity,15000)},5000); 

    var qualityInterval; 
    setTimeout(function(){qualityInterval = setInterval(quality,15000)},5000); 

    var longevityInterval; 
    setTimeout(function(){longevityInterval = setInterval(longevity,15000)},5000); 

    $('#integrity').click(function(){ 
     clearInterval(integrityInterval); 
     interval(); 
    }); 

    $('#quality').click(function(){ 
     clearInterval(qualityInterval); 
     quality(); 
    }); 

    $('#longevity').click(function(){ 
      clearInterval(longevityInterval); 
      longevity(); 
    }); 
}); 

Answer 2

私は例全体を間違って更新しました。 test

HTML：

<button id="integrity" class="buttonColor">integrity</button> 
<button id="quality" class="buttonColor">quality</button> 
<button id="longevity" class="buttonColor">longevity</button> 

<div id="home_image">background-color</div> 
<div id="test"></div> 

CSS：

.bg1{ 
    background-color:#e62083; 
} 
.bg2{ 
    background-color:#003caf; 
} 
.bg3{ 
    background-color:#684a00; 
} 

JS：

$(function(){ 

    var 
     home_image = $('#home_image'), 
     timeout, 
     addBetween = (function(aValues, firth){ 

      var 
       ini = 0, 
       end = aValues.length -1; 
       actual = (firth) ? (firth - 1) : (ini - 1); 

      return { 
       next: function(){ 
        actual++; 
        if (actual > end) 
        actual = ini; 
        return aValues[actual]; 
       } 
      }; 
     })(["integrity", "quality", "longevity"], 3), 
     colorBackGround = function(isTrigger) { 

     var 
      self = this; 

     isTrigger = isTrigger || false; 

     if (!isTrigger) 
      clearTimeout(timeout); 

     $(home_image) 
      .removeClass('bg1 bg2 bg3') 
      .addClass(function(index, class) { // jQuery 1.4 

       var 
        id = (isTrigger) ? addBetween.next() : $(self)[0].id, 
        newClass = ""; 

       switch(id) { 
        case "integrity": 
        newClass = "bg1"; break; 
        case "quality": 
        newClass = "bg2"; break; 
        case "longevity": 
        newClass = "bg3"; break; 
       } 

       $("#test").html(id + " " + newClass + " " + class); 
       return newClass; 
      }); 

     if (isTrigger) 
      timeout = setTimeout(function() { colorBackGround.call({}, true); }, 1000); 

     }; 

    $(".buttonColor").bind("click", function(ev) { 

    colorBackGround.call(this, false); 

    }); 

    colorBackGround.call({}, true); 


});