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

Question

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

我正在将 2.5MB 的单词加载到一个 div 中。当它正确异步运行时，它应该可以正常工作。还是 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);
}

此代码一次只会触发一个请求，每个请求都在前一个之后，直到它到达末尾。