延遲Turbolink的訪問以關閉畫布菜單以關閉

Question

我正在使用TurboLinks和一個關閉了動畫的畫布菜單 。 到那時，Turbolinks會在菜單完全關閉之前更改頁面，這似乎有些倉促。 我嘗試添加超時並修改TurboLinks的事件，但是沒有任何運氣。 Javascript / Jquery 確實不是我的強項，所以，我的問題是：有沒有辦法延遲TurboLinks請求的觸發，以便菜單可以正常關閉？

鈀 我正在與Laravel合作。

更新：

在文檔中，我發現您無法在開始之前取消訪問。 考慮到這一點，我將其設置為

$(document).on('turbolinks:before-visit', function(e){
    var url = event.data.url;
    console.log(url);
    event.preventDefault();
    e.stopImmediatePropagation();

    setTimeout(function(url){
        Turbolinks.visit(url);
    }, 1000);
});

但是，正如我在@OhGod的注釋行中所說的那樣， 為什么一切都崩潰了，所以該頁面被卡住了，並且在控制台中多次顯示“超出最大調用堆棧大小”錯誤。

Answer 1

那里有一個RFC，指示您不能在沒有用戶干預的情況下減慢/停止用戶離開頁面的過程。 因此，為什么每次要離開頁面時都會看到alert窗口彈出，但是您仍然可以單擊“繼續”以繼續離開。

也就是說，我可以給您解決方案。 他們所有的動畫都是CSS3驅動的，您唯一需要擔心的JavaScript是切換類的JavaScript。

$('.sidebar').on('click', 'a', function(e){
    e.preventDefault();

    var $this = $(this);

    if ($('body').hasClass('st-menu-open')) {
        $('body').removeClass('st-menu-open')
        setTimeout(function(){
           Turbolinks.visit($this.prop('href'));
        }, 500);
    }
});

我們在這里所做的就是在您的導航中添加點擊，如果主體具有該類，那么我們將其刪除。 但是，我們將等待500ms ，這與庫使用的CSS transition delay相對應，直到執行重定向。 這樣，在500毫秒后，過渡將完成，您可以重定向用戶。