изменение содержимого на основе таймера

Question

Функции щелчка, которые я сделал, изменяют содержимое. Но, когда я использую setinterval или settimeout, функции запускаются 1 раз, а затем запускаются сразу же без использования задержки.

Что я делаю неправильно?

$(document).ready(function() { 
 
    
 
    $('.seashellcontainertwo').hide(); 
 

 
    var settimer = 1; 
 

 
    $('.seashellcontainer').click(function() { 
 
    settimer = 0; 
 
    $('.seashellcontainer').hide(); 
 
    $('.seashellcontainertwo').show(); 
 
    }); 
 

 
    $('.seashellcontainertwo').click(function() { 
 
    settimer = 0; 
 
    $('.seashellcontainertwo').hide(); 
 
    $('.seashellcontainer').show(); 
 
    }); 
 

 

 
    if (settimer == 1) { 
 
    setInterval(function() { 
 
     $('.seashellcontainertwo').hide(); 
 
     $('.seashellcontainer').show(); 
 
    }, 3000); 
 
    setInterval(function() { 
 
     $('.seashellcontainertwo').show(); 
 
     $('.seashellcontainer').hide(); 
 
    }, 3000); 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="seashellcontainer">seashellcontainer</div> 
 
<div class="seashellcontainertwo">seashellcontainertwo</div>

Answer 1

Я полагаю, это то, что вы пытаетесь достичь в intervals, Не уверен, click событий, хотя. Дальнейшее разъяснение поможет.

$(document).ready(function() { 
 
    var seaShellContainerTwo = $('.seashellcontainertwo'); 
 
    var seaShellContainer = $('.seashellcontainer'); 
 
    seaShellContainerTwo.hide(); 
 
    var settimer = 0; 
 
    setInterval(function() { 
 
    if (settimer === 1) { 
 
     seaShellContainerTwo.hide(); 
 
     seaShellContainer.show(); 
 
     settimer = 0; 
 
    } else { 
 
     seaShellContainerTwo.show(); 
 
     seaShellContainer.hide(); 
 
     settimer = 1; 
 
    } 
 
    }, 3000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="seashellcontainer">seashellcontainer</div> 
 
<div class="seashellcontainertwo">seashellcontainertwo</div>