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

通过调用handleInterval来解决所有问题：

handleInterval();

如何暂停Text Javascript / var textarray？

1 个答案: