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

时间:2011-07-29 06:35:02

标签: javascript algorithm

我想在我的项目中像浏览器一样实现后退和前进等功能,就像我们拥有屏幕的网页一样。 我试过的是 最后设置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个屏幕,我认为这是不正确的,因为如果数据在{{1}将被改变然后我不能前进,如果是的请告诉我怎么能纠正它?

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

3 个答案:

答案 0 :(得分:20)

我不知道你如何适应你现在的方式,但你可以实现这样的功能:

你有两个堆栈。后栈和下一个栈。他们都开始是空的。当用户通过链接或除了后退/前进之外的某种其他导航方法导航到新页面时,清除下一个堆栈,将当前页面添加到后堆栈,然后继续导航。当用户单击时,将当前页面推送到前向堆栈,从后堆栈弹出页面,然后导航到弹出页面。当用户向前点击时,将当前页面推到后台堆栈,从前向堆栈弹出一个页面,然后导航到弹出页面。

编辑:您要求提供一些伪代码,所以请转到:

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

答案 1 :(得分:0)

您应该有两个号码:lastScreenInHistorycurrentScreen

  1. 将两者初始化为-1。
  2. 新屏幕到货时:
        lastScreenInHistory = ++currentScreen;     this.screenvisited[this.lastScreenInHistory]=data;

  3. 背面:if( currentScreen > 0 ) --currentScreen;

  4. On Forward:if( currentScreen < lastScreenInHistory ) ++currentScreen;

  5. 如果相应的if语句表达式为真,则应启用相应的按钮。

  6. 在后退和前进之后,您应该从screenvisited加载指数currentScreen的屏幕。

答案 2 :(得分:0)

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

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

然后,当'屏幕'加载时,它会将currentscreenindex增加1,从而产生currentscreenindex - 2 + 1 - 正是您所需要的。