javascript - "for"循环中的 Ajax 调用跳过奇数/偶数迭代

Question

如果我在这里问是因为我们卡在了一些我们不知道如何解决的问题上。我必须承认，我们已经在 StackOverflow 和搜索引擎中搜索了解决方案..但我们没有设法实现/解决问题。

我正在尝试创建一个 JavaScript 函数:

• 在我的 html 页面中检测到所有出现的 html 标记:<alias>

• 用 Ajax 调用的结果替换它的内容(发送 标签内容到ajax.php页面) + localStorage管理

• 最后从 <alias> 解包标记并保留从 ajax 调用返回的内容

唯一的问题是在这两种情况下它都跳过了一些迭代。 我们进行了一些研究，似乎“问题”在于 Ajax 是异步的，因此它不会在继续处理之前等待响应。我们甚至看到“async: false”并不是一个好的解决方案。

我留下了一些简短描述感兴趣的脚本部分

// includes an icon in the page to display the correct change
    function multilingual(msg,i) {
         // code  
    }

    // function to make an ajax call or a "cache call" if value is in localStorage for a variable
    function sendRequest(o) {
        console.log(o.variab+': running sendRequest function');
        // check if value for that variable is stored and if stored for more than 1 hour
        if(window.localStorage && window.localStorage.getItem(o.variab) && window.localStorage.getItem(o.variab+'_exp') > +new Date - 60*60*1000) {
            console.log(o.variab+': value from localStorage');
            // replace <alias> content with cached value
            var cached = window.localStorage.getItem(o.variab);
            elements[o.counter].innerHTML = cached;

            // including icon for multilingual post
            console.log(o.variab+': calling multilingual function');
            multilingual(window.localStorage.getItem(o.variab),o.counter);

        } else {
            console.log(o.variab+': starting ajax call');
            // not stored yet or older than a month
            console.log('variable='+o.variab+'&api_key='+o.api_key+'&lang='+o.language);
            $.ajax({
                type: 'POST',
                url: my_ajax_url,
                data: 'variable='+o.variab+'&api_key='+o.api_key+'&lang='+o.language,
                success: function(msg){
                    // ajax call, storing new value and expiration + replace <alias> inner html with new value
                    window.localStorage.setItem(o.variab, msg);
                    var content = window.localStorage.getItem(o.variab);
                    window.localStorage.setItem(o.variab+'_exp', +new Date);
                    console.log(o.variab+': replacement from ajax call');
                    elements[o.counter].innerHTML = content;

                    // including icon for multilingual post
                    console.log(o.variab+': calling multilingual function');
                    multilingual(msg,o.counter);
                },
                error: function(msg){
                    console.warn('an error occured during ajax call');
                }
            });
        }
    };

    // loop for each <alias> element found
        //initial settings
            var elements = document.body.getElementsByTagName('alias'),
            elem_n = elements.length,
            counter = 0;
            var i = 0;

    for(; i < elem_n;i++) {
        var flag = 0;
        console.info('var i='+i+' - Now working on '+elements[i].innerHTML);
        sendRequest({
            variab : elements[i].innerHTML,
            api_key : settings.api_key,
            language : default_lang,
            counter : i
        });

        $(elements[i]).contents().unwrap().parent();
        console.log(elements[i].innerHTML+': wrap removed');
    }

我希望你们中的一些人可以为我提供一些有效的解决方案和/或示例，因为我们陷入了这个问题:(

根据我们的测试，当值来自缓存时，第 1/3/5 ... 值被正确替换 当值来自 ajax 时，第二个/第四个 .. 值被替换

在此先感谢您的帮助:)

Answer 1

你的 elements array 是一个事件的 NodeList。当你在那些 <alias> 中打开东西时标签，该元素将从列表中消失。因此，您正在查看元素 0，然后执行 ajax 调用，然后摆脱 <alias>标记内容。在那一刻，element[0]变成了曾经的element[1] .但是，您的循环递增 i , 所以你跳过新的 element[0] .

没有理由使用 .getElementsByTagName()反正;您正在使用 jQuery，因此请始终如一地使用它:

var elements = $("alias");

这将为您提供一个(大部分)像数组一样工作的 jQuery 对象，因此您的代码的其余部分将无需进行太多更改(如果有的话)。