JS變量在渦輪鏈接的新頁面上「卡住」

首先，讓我爲這個問題的複雜性道歉，我不能真正地將它分解，因爲複雜性可能是原因的一部分。但是這個邏輯使頁面的活動鏈接點亮和閃爍。JS變量在渦輪鏈接的新頁面上「卡住」

使用turbolinks，在第一頁上一切正常，但當我們切換到另一個頁面時，事情開始發生故障。以前擁有前一頁active的鏈接仍然會說它通過參數active的鏈接是true，即使它不再具有active的類。

隨着turbolink禁用，一切都按預期工作。

function flicker(elem, active) { 
    var delay = Math.random() * (2000) + 130; 

    console.log($(elem).data('name') + ": " + active + ': ' + $(elem).hasClass('active')); 
    if (active == true) { 
    // We need specific timers for each link so each can operate with its own 
    // separate "thread" and be toggled independently of the others. 
    // Using window['foo'] to handle dynamic variable names. 
    window['timer-' + $(elem).data('name')] = setTimeout(function() { 
     window.setTimeout(function() { 
     $(elem).addClass('powered'); 
     }, 20) // Controls length of flicker. 
     flicker(elem, true); 
     $(elem).removeClass('powered'); 
    }, delay); 
    } else { 
    clearTimeout(window['timer-' + $(elem).data('name')]); 
    } 
}; 

$(document).on('turbolinks:load', function() { 
    // Initiate the current, active link. 
    $('.navbar a.active').each(function() { 
    window['timer-' + $(this).data('name')]; // Instantiating dynamic variable. 
    flicker($(this), $(this).hasClass('active')); 
    }); 
});

跟我來。因此，我將控制檯登錄到第3行的第一頁上，並按預期輸出。例如：

nav-1: true: true

將反覆獲取與每個閃爍輸出，指示從第1行的第一連桿active參數是true，並且它具有一個類的true。

但是，如果我第二點擊鏈接進入下一個頁面，然後控制檯將再次登錄：

nav-1: true: true 
nav-2: true: true

即使在這種情況下，nav-1不不有一類active。

來源

2017-07-03 Tony Beninate

原來，我可以通過重置頁面加載時的所有閃爍效果來解決此問題。

$('.navbar a').each(function() { 
    flicker($(this), false); 
});

現在可以與turbolinks一起使用。

來源

2017-07-03 14:45:23

JS變量在渦輪鏈接的新頁面上「卡住」

回答

相關問題