JS変数がターボリンクで新しいページに「つぶれて」来る

Question

まず、この質問の複雑さをお詫びしましょう。複雑さが原因の一部である可能性があるので、もっと簡単にそれを分解することはできません。しかし、このロジックは、ページのアクティブリンクを点灯させ、ちらつきを生じさせます。

ターボリンクを使用すると、最初のページですべて正常に動作しますが、別のページに切り替えると、物事が始まります。前のページのactiveのクラスを以前に持っていたリンクは、activeのクラスを持たなくても、activeの引数がtrueであることを引き続き示しています。

turbolinksを無効にすると、すべて正常に動作します。

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のクラスを有することをことを示し、各フリッカと出力を取得します。

しかし、私は次のページに行くために2番目のリンクをクリックすると、コンソールが繰り返しログに記録します。

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

にもかかわらず、このような場合には、nav-1が行うないはactiveのクラスを持っています。

Answer 1

私は、ページの読み込み時にすべてのちらつきの影響をリセットするだけでこれを修正できました。

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

現在ターボリンクで動作しています。