我正在創建一個網頁，我決定嘗試讓你自動回到開始，如果它需要一定的時間而不點擊螢屏。我嘗試這樣做，但是當我進入頁面時，無論它觸摸螢屏多少，時間都不會重置，并且無論如何都會出現警報。該網頁也在加載中，并未加載所有內容。這是我目前擁有的代碼：
var startTime = new Date();
document.addEventListener('DOMContentLoaded', function(){
var seconds = 1;
while (seconds < 5) {
endTime = new Date();
var timeDiff = endTime - startTime; //in ms
// strip the ms
timeDiff /= 1000;
// get seconds
var seconds = Math.round(timeDiff);
console.log(seconds " seconds");
setTimeout(() => {}, 1000); // Like time.sleep
}
alert("Touch the screen!")
})
document.addEventListener("click", function() {
console.log("Hello")
startTime = new Date()
});
謝謝！
uj5u.com熱心網友回復：
setTimeout 函式是一個異步函式，因此不會阻塞主執行緒。
你應該使用
let startTime=new Date();
setInterval(function() {
let currentTime=new Date();
let timeDiff=(currentTime-startTime)/1000;
if(timeDiff>5) {/*code to scroll up the page*/}
},200) //it checks every 200 millisecodns the time
document.addEventListener("click", function() {
console.log("Hello")
startTime = new Date()
});
uj5u.com熱心網友回復：
一旦 HTML 檔案被加載，“DOMContentLoaded”就會被觸發，這通常意味著它是在 css 和影像加載到頁面之前，這可以解釋為什么你的頁面沒有完全加載。單擊頁面后，我看不到任何重置計時器的邏輯，您應該有一個單擊事件偵聽器，它將重置計時器，并將計時器變數移到范圍之外，以便兩個事件偵聽器都可以使用它。
uj5u.com熱心網友回復：
我認為您對如何作業有誤解setTimeout。
您可以注冊一個函式，該setTimeout函式將在指定的毫秒數過去后呼叫。
你給它的功能是一個 noop，所以我猜你想象setTimeout有一個副作用。特別是在這種情況下，我猜您希望setTimeout停止回圈的執行，但事實并非如此。如果您希望它像time.sleep函式一樣作業，那不是它的作業方式，因為在注冊回呼之后，它只是繼續前進。
所以頁面沒有完全加載，因為它必須不斷地運行這個while回圈，并且在它完成之前不能做任何其他事情。
要獲得與您更相似的東西，time.sleep可以使用 async/await。
function sleep(ms){
return new Promise(resolve => setTimeout(resolve, ms));
}
document.addEventListener('DOMContentLoaded', async function(){
var seconds = 1;
while (seconds < 5) {
endTime = new Date();
var timeDiff = endTime - startTime; //in ms
// strip the ms
timeDiff /= 1000;
var seconds = Math.round(timeDiff);
console.log(seconds " seconds");
await sleep(1000)
}
alert("Touch the screen!")
})
在上面我定義了一個輔助函式，sleep它創建了一個 Promise，它在指定的 ms 數量過去后簡單地決議。
要使用它，必須將使用它的函式標記為async。這就是為什么您可以在呼叫中的async關鍵字之前看到關鍵字。
滿足該要求后，您可以通過在其前面添加關鍵字來使用 sleep 功能。functionaddEventListenerawait
uj5u.com熱心網友回復：
如果發生任何活動，這將每 5 秒檢查一次，如果沒有，則觸發您的頁面更新。
var timestamp = Date.now();
var checkTime = null;
document.addEventListener('DOMContentLoaded', function(){
checkTime = setInterval(doTimeout, 5000);
});
document.addEventListener("click", function() {
console.log("Hello")
timestamp = Date.now();
});
function doTimeout(){
if (Date.now() - timestamp >= 5000){
console.log("change page");
}
}uj5u.com熱心網友回復：
呼叫setTimeout一次，clearTimeout如果有觸摸或點擊事件則呼叫
document.addEventListener('DOMContentLoaded', function() {
var timeout = setTimeout(function() {
console.log('page will go back!');
}, 3000);
["click", "touchstart"].forEach(function(event) {
document.addEventListener(event, function() {
clearTimeout(timeout)
console.log('will not go back')
});
})
});轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/463845.html
標籤：javascript html