從頁面到頁面移動會產生錯誤（重複？）

Question

我試圖使用OnsenUI 2（截至目前的rc15）的pushPage()函數。旁邊的OnsenUI，我使用jQuery 3.

這裏是我的函數，當點擊某一元素應該推動一個頁面：

$(".tile_handler").on("click", ".imalink", function() { 
    var link = $(this).data().href; 
    if(link != null){ 
     document.querySelector("#myNavigator").pushPage(link, { animation: "slide-ios" }); 
    } 
}) 

當我推頁面的第一次，它工作正常。我使用iOS後退按鈕返回。然後我再次點擊它，我得到這個錯誤（並且越來越多，因爲我重複了這個過程）：

[index.js：450]未捕獲（承諾）pushPage已在運行。

這裏是一個應該載入分路器頁面的另一個功能：

$(".splitter_item").click(function() { 
    var address = $(this).data('address'); 
    $('#content')[0].load(address).then(menu.close.bind($('#menu')[0])); 
}) 

當我通過分配器兩個頁面之間切換，它開始拋出這個（多我每次頁面之間切換時）

[未定義：1]未捕獲（承諾）分流器側被鎖定。

---

我認爲正在發生的事情是，我打開一個頁面，離開它，當我再次訪問它，它再次加載頁面。但是這似乎並沒有在這樣as this OnsenUI例子中的行爲：

document.addEventListener('init', function(event) { 
    var page = event.target; 

    if (page.id === 'page1') { 
    page.querySelector('#push-button').onclick = function() { 
     document.querySelector('#myNavigator').pushPage('page2.html', {data: {title: 'Page 2'}}); 
    }; 
    } else if (page.id === 'page2') { 
    page.querySelector('ons-toolbar .center').innerHTML = page.data.title; 
    } 
}); 

還有就是popPage()功能，應該刪除以前加載頁面，將防止這一點。但引用不使用它，所以我認爲我做錯了什麼。但我不知道是什麼。

---

UPDATE：

我設法再現CodePen這兩個問題。 Here是Splitter錯誤，而here是pushPage()之一。這似乎是pushPage()一個是我的功能有問題，因爲它每次點擊它時都會添加一個pushPage()請求，不知道爲什麼。

這兩個錯誤似乎只發生在紋波模擬器（通過VS2015）。我似乎無法在Android模擬器中重現它們（但是無論如何，$(".tile_handler").on("click", ".imalink", function() {代碼會多次引發錯誤）。我正在進一步測試。

Answer 1

如果您雙擊某個按鈕/鏈接，例如您提及的兩個錯誤實際上都是您推送或執行錯誤操作兩次的安全措施。

當您嘗試在動畫運行時進行操作時，會顯示它們。正如你可以在例子中看到的那樣，只要在第一次完成之後開始第二次推送，就可以將頁面推送兩次或更多次，這是沒有問題的。

以下是您的確切代碼爲splitter和navigator的演示。

因此，錯誤不是來自您提供的代碼，也不是來自其他地方的代碼。

我唯一能想出的是，如果出於某種原因popPage方法未能正確完成，您會提到的行爲。也許如果您向我們提供您自己的codepen可以複製問題，我們可以進一步調試它。

一個替代方案，雖然高度不是建議將是在你做你的行動之前強制的狀態。然而，這不會解決問題，而只是掩蓋它。當然，就像所有黑客一樣 - 它可能會在未來的版本中崩潰。

myNavigator._isRunning = false; 

UPDATE：

這裏是您在評論中給了兩個更新的筆： https://codepen.io/IliaSky/pen/YWOOkW?editors=1010 https://codepen.io/IliaSky/pen/QEVVGm?editors=1010

基本上你是在init事件，該事件被觸發時添加處理程序一個頁面被添加。所以用你的邏輯，你在每個頁面上添加越來越多的處理程序。只要確保你只添加一次，你會沒事的。

添加的東西，如：

if (e.target.id == 'pagename') ... 

或者乾脆

$(document).on("init", '#dashboard_page', function(){ ... } 

Answer 2

基本上每次按下一個頁面時，該頁面觸發一個事件init。然而，溫泉仍然保持最初的頁面。

導航示例（相同的邏輯適用於分離器的一個）：

<ons-navigator> 
    <ons-page id="dashboard"> 
    <div class="imalink" data-href="request_list.html"></div> 
    </ons-page> 
</ons-navigator> 

您有儀表盤init事件。然後，您單擊該圖塊並轉到其他頁面。 然後request_list發生了自己的init事件。然而，我們的初始頁面仍然是最後一頁。

<ons-navigator> 
    <ons-page id="dashboard" style="display: none"> 
    <div class="imalink" data-href="request_list.html"></div> 
    </ons-page> 
    <ons-page id="request_list"> 
    ... 
    </ons-page> 
</ons-navigator> 

你有這樣的事情。然而，以下稱爲第二次：

$(".tile_handler").on("click", ".imalink", function() { 
    ... 
}) 

它再次添加偵聽器。 $el.on("click")就像是addEventListener的別名，意思是說您添加的聽衆越來越多。

所以，無論何時你瀏覽你不斷添加它們，因爲初始頁面從來沒有從dom中刪除。

替代方案：

1. 只能使用當前頁（e.target）

   $('selector') // instead of this 
   $(e.target).find('selector') // use this 
   

   這樣，你限制爲僅找到您剛剛創建的頁面元素。

2. 啓用從一開始就處理程序。 由於您使用jQuery，實際上有一種更簡單的方式來執行這些操作，而不依賴於init事件。

   只是這樣做的任何初始化處理程序之外：

   $(document).on("click", ".tile_handler .imalink", function() { ... }) 
   

   這實際上意味着，附加處理程序文件本身，只有當目標是.tile_handler .imalink的處理器將被調用 - 因此它與任何工作未來您創建的固定鏈接。

   這可能不是最有效的方法，但絕對是最簡單的一種。