Question

我创建了一个函数，该函数从数组中选取颜色以更改背景色。被访问后，将从阵列中进行选择。然后，我在<body>元素中添加了两个按钮以停止并重新开始颜色选择，我希望函数在我选择“重新启动”按钮时按“停止”按钮时继续选择颜色。我尝试过这种方法，但它会从数组的第一个元素重新开始：

$(document).ready(() => {
    const colors = ['blue','red','yellow','green'];
    let loop;
    function start(i){
      if(i < colors.length){
        loop = setTimeout(function(){
          $('body').css("backgroundColor", colors[i]);
          i++;
          if (i >= colors.length) {
            i = 0;
          }
          start(i);
        }, 1000);
      }
    }

    $('#btnStop').on('click', () => {
      clearTimeout(loop);
    });

    $('#btnRestart').on('click', () => {
      loop = start(0);
    });

    start(0);
  })

Answer 1

您可以通过添加另一个变量

来完成此操作

$(document).ready(() => {
    const colors = ['blue','red','yellow','green'];
    let loop;
    var iNUM = 0; //<<<<<<<<<<<
    function start(i){
      if(i < colors.length){
        loop = setTimeout(function(){
          $('body').css("backgroundColor", colors[i]);
          i++;
          if (i >= colors.length) {
            i = 0;
          }
          iNUM = i; //<<<<<<<<<<
          start(i);
        }, 1000);
      }
    }

    $('#btnStop').on('click', () => {
      clearTimeout(loop);
    });

    $('#btnRestart').on('click', () => {
      start(iNUM); //<<<<<<<
    });

    start(0);
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnStop">Stop</button>
<button id="btnRestart">Start</button>

Answer 2

Array.shift()和Array.push()怎么样？

const colors = ['blue', 'red', 'yellow', 'green'];
console.log(colors[0]);
colors.push(colors.shift());
console.log(colors[0]);

使用带有按钮的setTimeout（）方法停止和重新启动功能

2 个答案: