Question

首先，让我为这个问题的复杂性道歉，我不能简单地分解它，因为复杂性可能是原因的一部分。但是这种逻辑使页面的活动链接亮起并闪烁。

使用turbolinks，在第一页上一切正常，但是当我们切换到另一个页面时，事情开始变得混乱。以前具有上一页active类的链接仍然会说它在active的参数中传递的是true，即使它不再具有{{1}的类}}

禁用turbolinks后，一切都按预期工作。

active

和我在一起。所以，我在第一行的第3行有控制台日志，它将按预期输出。例如：

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

每次闪烁都会重复输出

，表示第1行的第一个链接nav-1: true: true参数为active且其类别为true。

但如果我点击第二个链接转到下一页，则控制台将重复记录：

true

即使在这种情况下，nav-1: true: true nav-2: true: true 不也有nav-1类。

Answer 1

事实证明，我能够通过重置页面加载时的所有闪烁效果来解决这个问题。

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

现在使用turbolinks。

JS变量在turbolinks的新页面上“卡住”

1 个答案: