在迭代期间，循环在数组元素上停顿 [英] Loop stalls on array element during iteration

问题描述

我试图通过使用'previous'和'next'按钮循环遍历数组，分别在数组中移动。

I'm trying to cycle iterate through an array by using a 'previous' and 'next' button, respectively moving through the array.

它工作正常，直到你改变'方向'并尝试说，例如
'next'
然后
'上一个'

It works fine until you change 'direction' and try say, for example 'next' then 'previous'

数组显示相同的元素已经打开而不是显示数组的前一个元素。

The array displays the same element it was already on instead of showing the previous element of the array.

例如，我在4点，点击上一个按钮并保持在4.你必须再次按下上一个按钮才能返回低至3.

For example, I am on 4, hit the 'previous' button and it remains on 4. You have to press the 'previous' button again to make it go back down to 3.

我在这里缺少什么...？

What am I missing here...?

var numbers = ["I am index number 0", "I am index number 1", "I am index number 2",
    "I am index number 3", "I am index number 4", "I am index number 5"];
var i=0;
var text = "";

document.getElementById("back").addEventListener("click", function previous() {
  if (i-1 >= 0) {
    var text = numbers[--i];
  }

document.getElementById("filler").innerHTML = text;
});

document.getElementById("forward").addEventListener("click", function next(){
  if (i < numbers.length) {
    var text = numbers[i++];
  }

document.getElementById("filler").innerHTML = text;
});

<p id="filler"></p>
<button id="back">PREVIOUS</button>
<button id="forward">NEXT</button>

推荐答案

首先你应该看一下Crayon Violent的评论

First of all you should look at the comment made by Crayon Violent

- 我减少了然后该值返回值。 i ++返回当前值然后递增。如果您希望它们的行为相同，请使用--i和++ i或在索引引用之外执行操作。

--i decrements the value then returns the value. i++ returns the current value then increments. If you want them to behave the same, use --i and ++i or do the operation outside of the index reference.

你不应该重新定义ifs中的文本

You should not redefine the text inside the ifs

var text = numbers[--i];

以下解决方案有效：

	var numbers = ["I am index number 0", "I am index number 1", "I am index number 2",
	    "I am index number 3", "I am index number 4", "I am index number 5"];
	var i =  -1;
	var text = "";

	document.getElementById("back").addEventListener("click", function previous() {
	  if (i > 0) {
	    text = numbers[--i];
	  }

	document.getElementById("filler").innerHTML = text;
	});

	document.getElementById("forward").addEventListener("click", function next(){
	  if (i < numbers.length - 1) {
	    text = numbers[++i];
	  }

	document.getElementById("filler").innerHTML = text;
	});

<p id="filler"></p>
<button id="back">PREVIOUS</button>
<button id="forward">NEXT</button>

这篇关于在迭代期间，循环在数组元素上停顿的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！