加載彈出模式的延遲

Question

我喜歡這個腳本，因爲它很簡單，但是對於JS來說我是新手，我不確定如何在顯示「歡迎」問候之前添加5秒的延遲。

var hasSeenGreeting = localStorage.getItem("greeting"); 

if(!hasSeenGreeting){ 
     document.getElementById("welcome").style.display = "block"; 
     localStorage.setItem("greeting", "true"); 
} 

document.querySelector(".button").addEventListener("click", function(){ 
    localStorage.removeItem("greeting", "true"); 
}); 

Answer 1

您可以使用setTimeout（）。 Here is a reference link。

setTimout(function() { 
    document.getElementById("welcome").style.display = "block"; 
    localStorage.setItem("greeting", "true"); 
}, 5000); // 5 second delay in ms. 

在上面的代碼中，我將一個匿名函數傳遞給setTimeout調用。在該函數內部，我正在執行代碼來設置歡迎div的display屬性 - 並設置localStorage值。

完成此操作的另一種方法是將這些調用放在它們自己的函數中，然後在setTimeout中調用它。例如：

var showDiv = function() { 
    document.getElementById("welcome").style.display = "block"; 
    localStorage.setItem("greeting", "true") 
} 

setTimeout(showDiv, 5000); // 5 second delay in MS. 

Here is a JS Fiddle for reference

祝你好運！