防止用户多次刷新页面

prevent user from refreshing a page multiple times

本文关键字：刷新 用户      更新时间：2023-09-26

当用户按住F5键10-15分钟时，网页变得没有响应，最终IIS抛出错误时，我面临一个问题。

为了管理这一点，我想限制用户在一定次数后按下F5（锁定F5事件）。经过一段时间间隔，比如说5分钟后，我想启用刷新功能（解锁F5事件）。

我正在使用cookie来保存用户按F5的次数。为了处理cookie，我使用了这里提到的代码。

指定一个事件以检查是否按下F5键。

$(document).on("keydown", tryingF5);

我使用一个变量来保存cookie值，并在用户按下F5时将其递增。

var numberOfF5Click = 1;
var thresholdClick = 10;
var numberOfF5Click = 1;
function tryingF5(e) {
        if ((e.which || e.keyCode) == 116) {
            //alert(numberOfF5Click);
            if (numberOfF5Click > thresholdClick) {
                e.preventDefault();
                alert("Multiple refresh has been prevented for some time!!");
            }
            numberOfF5Click = numberOfF5Click + 1;
            docCookies.setItem("NumberOfF5Click", numberOfF5Click);
            //alert("F5 Clicked =" + numberOfF5Click);
        };
    };

完整的代码设置在这里：JSBin

问题：代码没有按预期工作，有些地方是n，我该如何做得更好？

试试这个：

var everyXMinutes = 5 * 1000; // 5 seconds
var maxPerEveryXMinutes = 5; // 5 times per x seconds.
document.onkeydown = function (e) {
    if (e.keyCode === 116) {
        if (!localStorage.refreshments) {
            localStorage.refreshments = JSON.stringify([]);
        }
        var refreshments = JSON.parse(localStorage.refreshments);
        var date = new Date();
        if (date.getTime() - refreshments[refreshments.length - 1] >= everyXMinutes) {
            refreshments = [];
        } else if (refreshments.length >= maxPerEveryXMinutes) {
            alert("You must wait " + ((everyXMinutes - (date.getTime() - refreshments[refreshments.length - 1])) / 1000) + "s in order to be able to use the refresh function.");
            return false;
        }            
        refreshments.push(date.getTime());
        localStorage.refreshments = JSON.stringify(refreshments);
    }
};
相关文章：