防止页面上的setTimeout函数重新加载

Question

我在Bootstrap 3.3.6上运行。 我有一个非常简单的setTimeout函数，该函数会在10秒后触发一个弹出窗口。

setTimeout(function(){
        $('#myModal').modal('show');
        }, 10000);

我在主页末尾添加了此脚本。 该代码可以正常工作，并且弹出窗口（#myModal）可以正常打开。

问题是，如果我访问网站上的另一个页面，然后单击“后退”按钮，或在导航栏上单击“主页”，则会再次弹出该弹出窗口。

我在这里找到了有关使用localStorage并将其作为if / else运行的答案。 基本上是这样，以便您仅在第一次访问该页面时才看到弹出窗口。 但是我对javascript还是很陌生，我很难把它弄对。 有人可以帮我吗？

Answer 1

好吧，我想一种方法可能是创建一个cookie，然后检查它。 也许您可以在主页的脚本中创建如下所示的Cookie：

 window.onload = function() { if (!document.cookie){ setTimeout(function(){ $('#myModal').modal('show'); }, 10000); document.cookie = "cookie=yes; path=/"; } } 

如果我正确地完成了所有操作，那么首先应该检查是否没有Cookie。 如果没有cookie，您的模式警报将关闭，并创建一个名称为“ cookie”和值为“ yes”的cookie。 由于我们没有为此Cookie指定最长使用期限，因此它应该在用户离开网站时过期（我认为）。 另外，由于我们设置了通用路径，因此该Cookie应该在每个页面上都保持不变。

Answer 2

我将使用这样的简单方法：

 // load flag from localStorage var alreadyDisplayed = localStorage.getItem('alreadyDisplayed'); // if not found or found but 'false' - display modal (alert in this case) if (!alreadyDisplayed || alreadyDisplayed == 'false') { setTimeout(function() { alert('show'); // store to localStorage the fact that we displayed the modal localStorage.setItem('alreadyDisplayed', 'true'); }, 5 * 1000); // in ms, so 5*1000 = 5 secs }