在Javascript中使用一个按钮一次显示一个数组字符串

Question

我正在创建一个文本生成器，它按从上到下的顺序一次循环遍历数组字符串，每次按下按钮时都会更改为下一个字符串。下面的函数按顺序循环遍历字符串，但在按一下按钮后它会重复所有这些字符串。如何让函数等待显示下一个字符串，直到再次按下按钮？

function newThing() {
    var i = 0;
    setInterval(function() {
    document.getElementById('thingDisplay').innerHTML = oddthing[i++];
    if (i == oddthing.length) i = 0;
    }, newThing.active);
}

var oddthing = [
'<p>111111111</p>',
'<p>222222222</p>',
'<p>333333333</p>',
'<p>444444444</p>',
'<p>555555555</p>',
'<p>666666666</p>',
'<p>777777777</p>',
'<p>888888888</p>',
'<p>999999999</p>'
]

<div>
  <div align="center" id='thingDisplay'></div>
</div>

<div>
  <button class="box" id="button01" onclick="newThing()">New Thing</button>
</div>

<script src="javascript.js"></script>

Answer 1

这是一种方法：

var oddthing = [
'<p>111111111</p>',
'<p>222222222</p>',
'<p>333333333</p>',
'<p>444444444</p>',
'<p>555555555</p>',
'<p>666666666</p>',
'<p>777777777</p>',
'<p>888888888</p>',
'<p>999999999</p>'
]

// add a global counter
var count = 0;

function newThing() {
    document.getElementById('thingDisplay').innerHTML = oddthing[count];
    count++;
    if (count >= oddthing.length) count = 0;
}

Answer 2

删除setInterval，并在函数外声明i：

function initDisplay($btn, $display, array) {
  var i = 0;
  $btn.addEventListener('click', function() {
    $display.innerHTML = array[i++];
    if (i >= array.length) i = 0;
  });
}

initDisplay(
  document.getElementById('button01'),
  document.getElementById('thingDisplay'), [
    '<p>111111111</p>',
    '<p>222222222</p>',
    '<p>333333333</p>',
    '<p>444444444</p>',
    '<p>555555555</p>',
    '<p>666666666</p>',
    '<p>777777777</p>',
    '<p>888888888</p>',
    '<p>999999999</p>'
  ]
);

initDisplay(
  document.getElementById('button02'),
  document.getElementById('thingDisplay2'), [
    '<p>AAAAA</p>',
    '<p>BBBBB</p>',
    '<p>CCCCC</p>'
  ]
);

<div>
  <div align="center" id='thingDisplay'>&nbsp;</div>
  <button class="box" id="button01">New Thing</button>
</div>

<div>
  <div align="center" id='thingDisplay2'>&nbsp;</div>
  <button class="box" id="button02">New Thing 2</button>
</div>

<script src="javascript.js"></script>