如何暫停文本Javascript/var textarray？

Question

我想通過點擊頁面來暫停和恢復javascript。

我有文字滾動，通過淡入淡出來改變。

我在網上找到的解決方案是如何暫停字幕，但我認爲該解決方案不適用，因爲我的代碼不使用字幕標籤。

此外我的文字滾動，我​​不顯示文字，但圖像。

我想知道如何通過點擊頁面來暫停和恢復圖像？

<div id="menu"> 
     <button id="start-stop">Start/stop</button> 
</div> 

<div id="random_text"></div> 
</div> 
    <script type="text/javascript"> 
$(window).load(function() { 

    $(window).resize(function() { 
    var windowHeight = $(window).height(); 
    var containerHeight = $(".container").height(); 
    $(".container").css("top", (windowHeight/2 - containerHeight * 0.7) + "px"); 
    }); 

    var textarray = [ 
    "<img class=\"tall\" src=\"1.png\" alt=\"1\"></img><span class=\"by\">Example</span>" , 
    "<img class=\"wide\" src=\"2.png\" alt=\"2\"></img><span class=\"by\">Example</span>", 
    "<img class=\"wide\" src=\"3.png\" alt=\"3\"></img><span class=\"by\">Example</span>", 
    "<img class=\"wide\" src=\"4.png\" alt=\"4\"></img><span class=\"by\">Example</span>", 

    ]; 
    var firstTime = true; 

    function RndText() { 
    var rannum = Math.floor(Math.random() * textarray.length); 
    if (firstTime) { 
     $('#random_text').fadeIn('fast', function() { 
     $(this).html(textarray[rannum]).fadeOut('fast'); 
     }); 
     firstTime = false; 
    } 
    $('#random_text').fadeOut('fast', function() { 
     $(this).html(textarray[rannum]).fadeIn('fast'); 
    }); 
    var windowHeight = $(window).height(); 
    var containerHeight = $(".container").height(); 
    // $(".container").css("top", (windowHeight/2 - containerHeight * 0.7) + "px"); 
    } 

    $(function() { 
    // Call the random function when the DOM is ready: 
    RndText(); 
    }); 
    var inter = setInterval(function() { 
    intervalRunning = true; 
    RndText(); 
    }, 3000); 
}); 

$(document).on('click', '#start-stop', function(){ 
    if (intervalRunning) { 
    intervalRunning = false; 
    clearInterval(inter); 
    } else { 
    inter = setInterval(function() { 
     intervalRunning = true; 
     RndText(); 
    }, 3000); 
    } 
}) 

function toggle_visibility(id) { 
        var e = document.getElementById(id); 
        if(e.style.display == 'block') 
         e.style.display = 'none'; 
        else 
         e.style.display = 'block'; 
       } 

    </script> 

Answer 1

I've created a jsbin to show a basic solution.

由於您使用jQuery的，我會改變一切是如何構成的。我會將代碼包裝在$(document).ready中，以便在DOM準備就緒時觸發。

在一開始就創建一個bool跟蹤如果間隔運行：

var running = false; 

創建一個處理程序的時間間隔開啓或關閉需要：

var handleInterval = function(){ 
    if (running) { 
     running = false; 
     clearInterval(intObj);  
    } else { 
     intObj = setInterval(function(){ 
     running = true; 
     RndText(); 
     }, 1500); 
    } 
    }; 

設置一個處理程序按鈕：

$(document).on("click", "#pause_me", function(){ 
    handleInterval(); 
    }); 

用handleInter調用踢完整的東西VAL：

handleInterval();