如何实现类似浏览器的后退和前进功能

Question

我希望在我的项目中实现类似于浏览器中的后退和前进功能，就像网页一样，我们有屏幕。

我尝试了以下方法：

最初，我设置了currentscreenindex=-1

当第一个屏幕的数据出现时，执行该函数。

In screen data arrive function (){
   this.currentscreenindex++; 
   this.screenvisited[this.currentscreenindex]=data;

}

这是我尝试过的回退函数：

back(){
    currentscreenindex--;
    var screen=screenvisited[currentscreenindex];
    // will go to this screen
}

但是我的问题在这些代码中是什么：

                    currentscreenindex  screen data in screenvisted array
When 1st screen arrived     0     Data of 1st screen 
When 2st screen arrived     1     Data of 2st screen 
When 3st screen arrived     2     Data of 3st screen 
When 4st screen arrived     3     Data of 4st screen 
When 5st screen arrived     4     Data of 5st screen 
when user click back button 3     call the screen is set to 4th gib, 

当第四个屏幕的数据到达时，当前索引将会递增，所以currentindex=4，并且当前索引为4的数据将是第四个屏幕的数据。我认为这不正确，因为如果currentindex=4处的数据发生变化，则无法前进。如果可以，请告诉我如何更正？

请建议如何编写合适的后退和前进函数以执行与浏览器相同的功能。

- XMen

---

如果这是一个JavaScript应用程序，您可以使用URL哈希和HTML5历史记录将状态添加到浏览器的历史记录中，然后使用JS历史记录操作命令前进和后退。如果不行，您可能需要澄清您的目的。 - Wylie

Answer 1

我不知道如何与您当前的实现进行兼容，但您可以使用以下方法实现所需的功能：

您需要两个堆栈：一个后退堆栈和一个前进堆栈。它们都开始为空。当用户通过链接或其他非后退/前进导航方法导航到新页面时，清除下一个堆栈，将当前页面添加到后退堆栈中，并继续导航。当用户单击“后退”时，将当前页面推送到前进堆栈中，从后退堆栈中弹出一页，并导航到弹出的页面。当用户单击“前进”时，将当前页面推送到后退堆栈中，从前进堆栈中弹出一页，并导航到弹出的页面。

编辑： 您要求提供一些伪代码，因此请参考以下内容：

var currentPage=null;
var backStack=[];
var forwardStack=[];
function navigate(newPage) {
    currentPage=newPage;
    // stub
}
function linkClicked(page) {
    backStack.push(currentPage);
    forwardStack=[];
    navigate(page);
}
function goBack() {
    forwardStack.push(currentPage);
    navigate(backStack.pop());
}
function goForward() {
    backStack.push(currentPage);
    navigate(forwardStack.pop());
}

- icktoofay

---

良好的响应。可以通过添加启用/禁用按钮来扩展。尝试在导航函数中添加此代码。 if (backStack.count == 0) backButton.Enabled = false; else backButton.Enabled = true; if (forwardStack.count == 0) forwardButton.Enabled = false; else forwardButton.Enabled = true; - Baz Guvenkaya

Answer 2

你需要两个数字：lastScreenInHistory和currentScreen。

1. 将它们都初始化为-1。

2. 在新屏幕到达时：
   lastScreenInHistory = ++currentScreen; this.screenvisited[this.lastScreenInHistory]=data;

3. 在返回时：if( currentScreen > 0 ) --currentScreen;

4. 在前进时：if( currentScreen < lastScreenInHistory ) ++currentScreen;

5. 相应的按钮应该启用，当且仅当相应的if语句表达式为真时。

在后退和前进之后，你应该从screenvisited中的索引currentScreen加载屏幕。

- unkulunkulu

---

当我在当前索引4之后返回时，索引4的数据与索引3的数据相同，我认为这不正确，那么此时我该如何向前移动，因为没有向前的数据可用？ - XMen

我不明白为什么数据是一样的。如果需要回退，可以复制旧数据。 - unkulunkulu

Answer 3

这个简单的解决方案怎么样：

back(){
    currentscreenindex-=2;
    var screen=screenvisited[currentscreenindex+1];
    // will go to this screen
}

然后，当“屏幕”加载时，它将通过1递增currentscreenindex，结果为currentscreenindex-2+1 - 这正是您所需的。

- bezmax