防止頁面上的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 }