如何防止我的javascript轮询网站过快？

我很久以前创建这个网站是为了抓取随机的puu.sh图像并显示它们。还有一个警告，这个网站显示的内容是用户生成的，我不能保证它是SFW

我刚开始再次查看它，它用于收集内容的系统似乎有一些严重的缺陷。我如何更改我的javascript，使其不会垃圾邮件发送puu.sh，并使其拒绝连接

代码如下：

var currentThumb = 0;

function getImgUrl()
{
    var text = (Math.round(Math.random() * 9)).toString();
    //var text = '3T';
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for(var i=0; i < 4; i++ )
        text += possible.charAt(Math.floor(Math.random() * possible.length));

    return 'http://puu.sh/' + text;
}

function open_in_new_tab(url)
{
  var win=window.open(url, '_blank');
  win.focus();
}

function getImages()
{
    //var width = window.innerWidth;
    var images = 10;

    for(var i = 0;i < images;i++)
    {
        var url = getImgUrl();

        document.getElementById('thumbs').innerHTML += '<img class="thumb" id="thumb' + i + '" src=' + url + '>';

        if(i == 0)
        {
            document.getElementById('fullimage').innerHTML = '<img id="big" src=' + url + '>';
            $('#thumb' + currentThumb).css('border','2px solid white');
        }
    }
}

function refreshImages()
{
    var images = 10;

    for(var i = 0;i < images;i++)
    {
        var url = getImgUrl();

        $('#thumb' + i).attr('src',url);
    }

    $('img').css('border','');
    $('#thumb' + currentThumb).css('border','2px solid white');
}

function resize()
{
    var width = $(window).width();
    var height = $(window).height();
    $('#fullimage img').css('max-width',width);
    $('#fullimage img').css('max-height',height - 87);
}

function setBig()
{
    $('#big').attr('src',($('#thumb' + currentThumb).attr('src')));

    $('img').css('border','');
    $('#thumb' + currentThumb).css('border','2px solid white');

    resize();
}

getImages();

$('img').error(function() {
    $(this).attr('src',getImgUrl());
    setBig();
});

$('#thumbs img').click(function() {
    $('#fullimage').html('<img id="big" src=' + $(this).attr('src') + '>');

    currentThumb = parseInt($(this).attr("id").match(/\d+/));

    $('img').css('border','');
    $(this).css('border','2px solid white');

    resize();
});

$('#fullimage').click(function() {
    open_in_new_tab($('#fullimage img').attr('src'));
});

$(window).resize(function() {
    resize();
});

$(document).ready(function() {
    resize();
});

---

未测试，但请尝试此新的

getImages（）

函数（替换旧函数）

函数getImages（图像） { 如果（！图像）{ document.getElementById（'fullimage'）。innerHTML=''； $（'#thumb'+currentThumb）.css（'border'，'2px纯白'）； 图像=1； } document.getElementById（'thumbs'）。innerHTML+=''； 图像++； 如果（图像<10）{ setTimeout（函数（）{getImages（images）；}，25）； } }

---

它将被调用9次，但第一次它应该做你在i=0和1时所做的事情；无论图像是否已加载，它都将每25毫秒触发一次。增加该数字（25）以降低速度。

您的主要问题似乎是，由于错误处理程序，当您点击404时，您正在向服务器发送垃圾邮件。试试像这样的东西

$('img').error(function() {
    var _this = this;
    setTimeout(function () {
        $(_this).attr('src',getImgUrl());
        setBig();
    }, 500); // Whatever timeout is good not to spam
});

---

只需使用setInterval每隔X获取一个图像milliseconds@TheShellfishMeme这种解决方案的问题是，图像会不断变化。在当前设置中，“成功”加载的图像将保留。此外，目前的随机化系统并不完美，它可能会选择404图像。你是什么意思，它们会不断变化？一次插入一个，这样一旦加载，它们就会占用更多空间，然后移动其他图像？例如，您可以先插入占位符来修复它。@TheShellfishMeme抱歉，我误解了您的意思。我想你是说插入一个不断执行的setInterval，它改变了所有的图像。我已经插入了占位符来阻止它们四处移动。问题是，如果其中一个图像是404，它会一次又一次地垃圾邮件puu.sh，并且由于多个图像垃圾邮件puu.sh，该站点最终拒绝连接。我刚刚修复了一个错误，仅供参考（在图像中添加了2个）。请注意，我假设

getImages（）

在全局/窗口范围内，根据给定的代码，似乎是这样。顺便说一句，这是一个管道胶带解决方案。更好的解决方案是使用以下链接上的答案，但需要更改更多代码。在修复了一些错误后，我测试了你的代码，它对我的错误处理产生了一些奇怪的影响，比如，它不再工作了。奇怪的影响是什么意思？另外，尝试将数字设置为较低的50毫秒或75毫秒。如果您有足够的精力，您应该重新构造代码，以便只加载3-5个图像，然后等待一段时间，然后加载更多图像等。您可以使用一个变量，例如

imagesLoading

来跟踪加载的图像数量，然后在图像完成加载或出错时减少

imagesLoading

。当

imagesLoading

再次点击0时，请等待一段时间，然后加载另一小批图像。这似乎只是降低了它们同时刷新的速度，之后它们都开始被授予503个服务错误。我认为您必须为每个图像创建一个错误处理程序，然后使用

setTimeout

或

setInterval

创建一个要加载的新图像队列，这样，多个404在同一时间段不会导致您在同一时间段后再次开始加载所有图像。您可以做的另一件事是随机设置超时，这样请求就不会同时发生。

function getImages(images)
{
    if (!images) {
        document.getElementById('fullimage').innerHTML = '<img id="big" src=' + url + '>';
        $('#thumb' + currentThumb).css('border','2px solid white');
        images = 1;
    }

    document.getElementById('thumbs').innerHTML += '<img class="thumb" id="thumb' + i + '" src=' + url + '>';

    images++;

    if (images < 10) {
        setTimeout(function() { getImages(images); }, 25);
    }
}

$('img').error(function() {
    var _this = this;
    setTimeout(function () {
        $(_this).attr('src',getImgUrl());
        setBig();
    }, 500); // Whatever timeout is good not to spam
});