如何实现像浏览器这样的后退和前进功能

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, 

因此,当第4个屏幕的数据到达时,当前索引将增加,因此currentindex=4当前索引4的数据将是第4个屏幕,我认为这是不正确的,因为如果数据currentindex=4将会改变,那么我不能前进,如果是的请告诉我如何纠正它？

请建议我如何编写正确的后退和前进功能来执行与浏览器相同的功能.

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