Question

我的Ajax调用存在一些问题。我需要从json文件中显示大量数据，但这个过程会锁定整个选项卡或浏览器。

我将2.5MB的单词加载到一个div中。当它正确运行异步时它应该工作正常imho。或者2.5MB对于浏览器来说太多了？

我的目标是让浏览器在加载时保持响应。我可以在函数运行时创建一个加载屏幕，但这是后来的问题。

这是我的代码：

function returnWords() {
            var input2 = '', chr = '';
            for (var i = 65; i <= 90; i++) {
                input2 = String.fromCharCode(i);
                chr = input2.toLowerCase();
                console.log(chr);

                $.ajax({
                    url: 'words/words_' + chr + '.json',
                    dataType: 'json',
                    async: true,
                    success: function(words) {
                        console.log(chr + ' done');
                    }
                });
                var w = "";
                w = words.join();
                var output = w.split(',').join('<br />');
                $('.result').append(output);
            } 
            console.log('done');
        };

Answer 1

假设你没有这么多，你会得到一个堆栈溢出，这看起来更适合写为递归

function returnWords() {
    var w = [], output; // share these over each step
    function step(i) {
        var chr;
        if (i <= 90) { // more chrs to go
            chr = String.fromCharCode(i).toLowerCase();
            console.log(chr);
            $.ajax({
                url: 'words/words_' + chr + '.json',
                dataType: 'json',
                success: function (words) {
                    console.log(chr + ' done');
                    w = w.concat(words); // save for later
                    step(i + 1);
                }
            });
        } else {
            output = w.join().split(',').join('<br />');
            $('.result').append(output);
            console.log('done');
        }
    }
    step(65);
}

此代码一次只会触发一个 REQUEST ，每个 REQUEST 都会跟随前一个，直到它结束。

Jquery：Ajax请求看起来是同步的，锁定浏览器

1 个答案: