如何實現像瀏覽器這樣的后退和前進功能

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

Answer 2

你應該有兩個數字： lastScreenInHistory ， currentScreen 。

1. 將兩者初始化為-1。

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

3. On Back： if( currentScreen > 0 ) --currentScreen;

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

5. 如果相應的if語句表達式為true，則應啟用相應的按鈕。

在后退和前進之后，您應該從索引currentScreen screenvisited加載屏幕。

Answer 3

這個簡單的解決方案如何：

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

然后，當“屏幕”被加載時，它會增加currentscreenindex 1，導致currentscreenindex - 2 + 1 -正是你需要的。