避免页面重新加载以及使用 Javascript/JQuery 重新加载时 [重复]

Posted 2023-02-22

【中文标题】避免页面重新加载以及使用 Javascript/JQuery 重新加载时 [重复]

【英文标题】：Avoid page reload and when press reload using Javascript/JQuery [duplicate]

【发布时间】：2021-12-15 01:57:07

【问题描述】：

我正在创建一个考试应用程序，我希望用户在参加考试时防止页面重新加载，因为它也会刷新考试计时器。有什么方法可以直接避免在 javascript 中重新加载页面，或者任何人都可以提出另一种理想的方法，例如显示弹出窗口并避免页面重新加载或其他什么？

【问题讨论】：

没有办法阻止用户重新加载。

because it refreshes the examination timer too 那么你应该解决这个问题，而不是试图搞乱浏览器的默认行为。

XY 问题 - 修复你的计时器。理想情况下使用服务器端来存储开始时间。

你应该将定时器信息保存在服务器上以保持剩余时间

感谢大家的建议...

【参考方案1】：

您不能真正阻止用户重新加载，因为它是浏览器的默认行为，您可以做的是将计时器值存储在某处（后端服务器或本地存储），然后在每次执行期间从那里获取值会话

// you cannot run this snippet here because of stack security reasons
let timerValue = localStorage.getItem('timer') || 10; // if timer value is not found then it should be 10 seconds by default

const wait = (ms) => new Promise(r => setTimeout(r, ms));

run();

async function run() 
    console.log('timer has begun');
    while(true) 
        if (timerValue <= 0) break;
        timerValue--;
        localStorage.setItem('timer', timerValue);
        await wait(1000);
    

    console.log('timer has ended');
    localStorage.setItem('timer', null); // reset timer once the test is finished

注意：这只是一个临时解决方案，更好的方法是设置一个快速服务器作为您的支持，并使用它来为每个会话提供计时器值