Question

我制作了一个脚本，允许用户发送由php提供支持的每周简报。我的PHP代码很好，100％工作。但是，我制作了一个脚本来计算发送了多少通讯以检查是否所有新闻通讯都已发送。

我所做的代码如下：

function sendMail(test) {
var onderwerp = document.getElementById('getOnderwerp').value;
var pin = document.getElementById('secretPIN').value;
var e = document.getElementById('selectBrief');
var brief = e[e.selectedIndex].value;
var checkbox = [];
$('input[type="checkbox"][name="check_list[]"]').each(function(_, ele) {
if ($(ele).prop('checked')) {
   checkbox.push($(ele).attr('value'));
  }
});
loadgif2();

var breakx = false;
var temp = '';
var text = '';
var h = 0;
var regExp = /\(([^)]+)\)/;
var xhr = [];

for(var j = 0; j < checkbox.length; j++) {

    if (breakx == true) {
        removegif();
        break;
    }


    var provincie = checkbox[j].replace(/\(([^)]+)\)/, '');
    var aantal = checkbox[j].match(regExp)[1];

    h = 0;

    xhr = [];

    temp = '';
    temp = provincie + ' word verstuurd';
    text += temp + '<br>';


    for (i = 0; i < aantal; i++) {
        if (breakx == true) {
            break;
        }
        (function (i) {
            xhr[i] = new XMLHttpRequest();
            url = "/modules/pages/ajax/nieuwsbrief/send-mail.php?provincie=" + provincie +
                "&test=" + test + "&brief=" + brief + "&onderwerp=" + onderwerp + "&pin=" + pin + "&offset=" + i;
            xhr[i].open("POST", url, true);
            xhr[i].onreadystatechange = function () {
                if (xhr[i].readyState == 4 && xhr[i].status == 200) {



    document.getElementById("spancontent").innerHTML = 'Even geduld, nieuwsbrief word verzonden<br><br>' + text;
     document.getElementById("spancontent").innerHTML = 'Even geduld, nieuwsbrief word verzonden<br><br>' + text + '<br>' +
                        h + ' e-mails van de ' + aantal + ' verzonden in provincie ' + provincie;

                    h++;
                    if (h == aantal) {
                        text = text.replace(temp, provincie + ' is verzonden<br>');
                        document.getElementById("spancontent").innerHTML = 'Even geduld, nieuwsbrief word verzonden<br><br>' + text;
                    } else {
                        document.getElementById("spancontent").innerHTML = 'Even geduld, nieuwsbrief word verzonden<br><br>' + text + '<br>' +
                        h + ' e-mails van de ' + aantal + ' verzonden in provincie ' + provincie;
                    }

                    console.log(xhr[i].responseText);

                    if (xhr[i].responseText == '<br> Ongeldige PIN') {
                        breakx = true;
                    }

                }
            };
            xhr[i].send();
        })(i);
    }
}
}

上面的代码正在运行，但我面临的唯一问题是，只要我有一个复选框数组长度＆gt; 1它不能正常工作。我的猜测是循环过快，xhr请求只需要一点时间来获取php文件。我的问题是在这里如何解决这个问题？我一直在考虑暂停脚本，直到xhr请求完成并在之后恢复。

修改

我编辑的代码是这样的：

    function sendMail(FormElements, test) {
    var onderwerp = document.getElementById('getOnderwerp').value;
    var pin = document.getElementById('secretPIN').value;
    var e = document.getElementById('selectBrief');
    var brief = e[e.selectedIndex].value;
    var checkbox = [];
    $('input[type="checkbox"][name="check_list[]"]').each(function(_, ele) {
    if ($(ele).prop('checked')) {
       checkbox.push($(ele).attr('value'));
      }
});
loadgif2();

    sendmail2(0, test,brief,onderwerp,pin,checkbox, '');
}

function sendmail2(checkboxcount, test,brief,onderwerp,pin,checkbox,text) {
    var breakx = false;
    var temp = '';
    var h = 0;
    var regExp = /\(([^)]+)\)/;
    var xhr = [];
    var provincie = checkbox[checkboxcount].replace(/\(([^)]+)\)/, '');
    var aantal = checkbox[checkboxcount].match(regExp)[1];

    temp = provincie + ' word verstuurd';
    text += temp + '<br>';
    for (i = 0; i < aantal; i++) {
        if (breakx == true) {
            break;
        }
        (function (i) {
            xhr[i] = new XMLHttpRequest();
            url = "/modules/pages/ajax/nieuwsbrief/send-mail.php?provincie=" + provincie +
                "&test=" + test + "&brief=" + brief + "&onderwerp=" + onderwerp + "&pin=" + pin + "&offset=" + i;
            xhr[i].open("POST", url, true);
            xhr[i].onreadystatechange = function () {
                if (xhr[i].readyState == 4 && xhr[i].status == 200) {
                    document.getElementById("spancontent").innerHTML = 'Even geduld, nieuwsbrief word verzonden<br><br>' + text;
                    document.getElementById("spancontent").innerHTML = 'Even geduld, nieuwsbrief word verzonden<br><br>' + text + '<br>' +
                        h + ' e-mails van de ' + aantal + ' verzonden in provincie ' + provincie;

                    h++;
                    if (h == aantal) {
                        text = text.replace(temp, provincie + ' is verzonden<br>');
                        document.getElementById("spancontent").innerHTML = 'Even geduld, nieuwsbrief word verzonden<br><br>' + text;
                        if (checkboxcount + 1 == checkbox.length) {

                        } else {
                            sendmail2(checkboxcount + 1, test, brief, onderwerp, pin, checkbox,text);
                        }
                    } else {
                        document.getElementById("spancontent").innerHTML = 'Even geduld, nieuwsbrief word verzonden<br><br>' + text + '<br>' +
                            h + ' e-mails van de ' + aantal + ' verzonden in provincie ' + provincie;
                    }

                    console.log(xhr[i].responseText);

                    if (xhr[i].responseText == '<br> Ongeldige PIN') {
                        breakx = true;
                    }

                }
            };
            xhr[i].send();
        })(i);


    }
    }

这段代码按照我想要的方式工作，但现在我得到一些随机的500内部错误，但它们似乎完全随机？有时他们出现，有时他们不出现，我没有改变任何东西。任何解决方案？

Answer 1

在你的代码中：

xhr[i].open("POST", url, true);

将其更改为：

xhr[i].open("POST", url, false);

对于您的问题，这是一个弃用且不好的解决方法，您应该找到另一种方法。（https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests）

如何在xhr请求完成之前暂停javascript脚本？

1 个答案: