如何以编程方式阻止网页在特定时间段内刷新？

Question

我正在使用特定的移动线框网页，在用户启动计时器之后，用户即将回答问题时，用户启动Web内容主体。有两种情况如何回答问题。 1.用户无法及时回答，服务器会将答案视为失败。 2.用户回答问题时间早于问题时间。

我需要防止用户重新运行脚本来计算秒数。我拒绝解决方案，问题页面加载前端可以与数据库进行通信后，不，只有在问题回答之前和之后才允许与我进行数据库通信，因为我想避免在回答期间丢失连接的问题。由于这个原因，我有时间的JS脚本类似如下：

iterator= 0; 
secondsMax = 15; 
elem = document.getElementById("secLeft"); 
elem.innerHTML = secondsMax ; 
function timer() { 
    setTimeout(function(){ 

    iterator++; 
    elem.innerHTML = secondsMax - iterator; 
    if(iterator == secondsMax) { 
     // progress bar move... 1 question from 5 
     move(); 
     iterator= 0; 
     //give signal to evaluate question ... 
     return; 
    } 
    timer(); 
    }, 1000); 
} 

StackOverflow的外形酷似类似这样的问题只包含答案使用AJAX没有给予从服务器响应加载页面。但我需要以编程方式阻止用户在前端刷新以防止作弊（但也许ajax是很好的解决方案，但我可能不明白它在这种情况下的用法）。你有什么想法，或解决方案如何做到这一点？如果这个解决方案真的很糟糕（我是网络技术领域的新手），请随时为我提供更好的建议。

预先感谢您的时间。

Answer 1

首先，您必须进行服务器端验证以排除作弊情况。

例如，问任何问题与开始时间唯一的哈希连接，当您收到有关该散列，你可以花了比较时间回答......

在客户端，你可以存储在localstorage中启动该问题的时间，并且如果页面加载找到当前问题散列的本地存储条目 - 使用找到的初始值初始化定时器。

const TIME_ALLOWED = 10e3; // 10 sec 
 
const QUESTION_HASH = '1fc3a9903'; 
 
// start = localStorage.getItem(QUESTION_HASH) else 
 
let start = Date.now(); 
 
let timeleft = document.getElementById('timeleft'); 
 

 
let timer = setInterval(() => { 
 
    
 
    let timepass = Date.now() - start; 
 
    if (timepass >= TIME_ALLOWED) { 
 
    clearInterval(timer);  
 
    timeleft.innerText = 'Time is over'; 
 
    // localStorage.setItem(QUESTION_HASH, null) 
 
    return; 
 
    } 
 
    let secs = (TIME_ALLOWED-timepass)/1000 | 0; 
 
    let mins = secs/60 | 0; 
 
    secs = secs % 60; 
 
    if (secs < 10) secs = '0' + secs; 
 
    timeleft.innerText = `${mins}:${secs}`; 
 
}, 500); 
 

 
const answer = e => { 
 
    if (Date.now() - start >= TIME_ALLOWED) return; // disallow to answer 
 
    clearInterval(timer); 
 
    timeleft.innerText = 'Answer received'; 
 
    // localStorage.setItem(QUESTION_HASH, null) 
 
}

Time left: <span id="timeleft"></span><br/> 
 

 
<button onclick="answer()">Answer</button>