javascript - 使用 ajax 加载字典文件，不要让 iPhone Mobile Safari 崩溃

Question

我有一个 Web 应用程序，我在其中(通过 ajax)将字典文件 (1MB) 加载到 javascript 数组中。我找到了 Mobile Safari crashes after 10 seconds 的原因.但现在我想知道如何解决这个问题？

在上面的链接中，答案建议使用 setInterval，但这意味着我必须将字典文件分成多个部分，然后一个一个地加载它们。这当然可以做到，但考虑到互联网速度，我必须制作很多 block ，并且太多的请求将永远加载页面(如果我制作的 block 太大，一些移动用户可能会发生这种情况将无法在给定的 10 秒内下载该 block )。

所以，我的问题是:有没有人遇到过这种问题，您是如何解决的？对正确方向的普遍插入表示赞赏。

编辑:这是我用来加载字典的 js 代码:

var dict = new Trie();

$.ajax({
    url: 'data/dictionary_342k_uppercase.txt',
    async: true,
    success: function (data) {
        var words = data.split('\n');
        for (var i = words.length - 1; i >= 0; i--) {
            dict.insert(words[i]);
        }           
    },
    error: function(){
        $('#loading-message').text("Problem s rječnikom");
    }
});

特里.js:

function Trie () {
  var ALPHABET_SIZE = 30;
  var ASCII_OFFSET = 'A'.charCodeAt();

  this.children = null;
  this.isEndOfWord = false;

  this.contains = function (str) {
    var curNode = this;

    for (var i = 0; i < str.length; i++) {
      var idx = str.charCodeAt(i) - ASCII_OFFSET;
      if (curNode.children && curNode.children[idx]) {
        curNode = curNode.children[idx];
      } else {
        return false;
      }
    }

    return curNode.isEndOfWord;
  }

  this.has = function (ch) {
    if (this.children) {
      return this.children[ch.charCodeAt() - ASCII_OFFSET] != undefined;
    }
    return false;
  }

  this.next = function (ch) {
    if (this.children) {
      return this.children[ch.charCodeAt() - ASCII_OFFSET];
    }
    return undefined;
  }

  this.insert = function (str) {
    var curNode = this;

    for (var i = 0; i < str.length; i++) {
      var idx = str.charCodeAt(i) - ASCII_OFFSET;

      if (curNode.children == null) {
        curNode.children = new Array(ALPHABET_SIZE);
        curNode = curNode.children[idx] = new Trie();
      } else if (curNode.children[idx]) {
        curNode = curNode.children[idx];
      } else {
        curNode = curNode.children[idx] = new Trie();
      }
    }

    curNode.isEndOfWord = true;
    return curNode;
  }
}

Answer 1

一旦您开始使用 JS 进行处理，这是一个非常常见的问题。如果 Mobile Safari 问题是原因，那么您要做的是找出此处的 CPU 时间。

我假设它是 dict.insert() 循环而不是 data.split() 调用(这会更难管理)。

这里的想法是将 dict.insert() 循环拆分为可以在顺序循环中异步调用的功能 block (这就是 setupBuildActions 函数做)。在第一个 block 之后，每个后续 block 都通过 setTimeout 调用，这有效地重置了 JS 运行时中的函数时间计数器(这似乎是杀死你的进程的原因)。

使用 Sequencer 函数意味着您还可以控制函数的运行顺序(它们始终按照它们在此处生成的顺序运行，并且不会安排两个或多个函数同时执行)。这比在没有回调的情况下触发数千个 setTimeout 调用要有效得多。您的代码保留对执行顺序的控制(这也意味着您可以在执行期间进行更改)并且 JS 运行时不会因计划执行请求而重载。

您可能还想在 https://github.com/michiel/sequencer-js 查看节点项目更多测序示例和http://ejohn.org/blog/how-javascript-timers-work/有关不同平台上的 setTimeout 的解释。

var dict = new Trie();

// These vars are accessible from all the other functions we're setting up and
// running here

var BLOCKSIZE     = 500;
var words         = [];
var buildActions  = [];

function Sequencer(funcs) {
  (function() {
    if (funcs.length !== 0) {
      funcs.shift()(arguments.callee);
    }
  })();
}

// Build an Array with functions that can be called async (using setTimeout)

function setupBuildActions() {
  for (var offset=0; offset<words.length; offset+= BLOCKSIZE) {
    buildActions.push((function(offset) {
      return function(callback) {
        for (var i=offset; i < offset + BLOCKSIZE ; i++) {
          if (words[i] !== null) { // ugly check for code brevity
            dict.insert(words[i]);
          }
        }           
        // This releases control before running the next dict.insert loop
        setTimeout(callback, 0);
      };
    })(offset));
  }
}

$.ajax({
    url: 'data/dictionary_342k_uppercase.txt',
    async: true,
    success: function (data) {
      // You might want to split and setup these calls 
      // in a setTimeout if the problem persists and you need to narrow it down
      words = data.split('\n');
      setupBuildActions();
      new Sequencer(buildActions);
    },
    error: function(){
      $('#loading-message').text("Problem s rječnikom");
    }
});