Javascript 在类似HTML Excel的电子表格中更新单元格时减少延迟 形势

好吧，那么就这么定了：我给自己设置了一个挑战来提高我的JavaScript知识。这个挑战涉及到创建一个完全类似Excel的前端电子表格。目前我拥有的是一个有15列和30行表格单元格的表格，允许文本输入。就像在Excel中一样，每个单元格都有自己唯一的引用ID（A2、F14、G9等）：

这些单元格将允许将类似于Excel的live公式放入其中，电子表格将相应地更新自身，例如：

           _____________________
     _____|__________C__________|
    |__1__| =(SUM(A1:A3)*C3)+B2 |

    Would translate to: var n = ((8+100+300)*5)+6;

问题 现在这一切都很好，但问题是：每次我只更新一个单元格，我必须循环并更新所有单元格，以确保数据的准确性。当只有9个单元格可用时，这不是一个大问题，就像上面的粗糙示例中一样，但我当前的表有15列30行。。。450个

我现在已经设置好了，这样每当浏览器的焦点离开一个单元格时，后面的JavaScript就会循环并更新每个单元格，以确保数据都是正确的。当只有5或6个单元格中有数据时，这本身会导致一点延迟，因此我担心当我填充电子表格中的每个单元格时，我的浏览器将在我身上消失

我很可能是在梦想不可能的事情，但理想情况下，我希望能够呈现一个包含数百列和数百行的电子表格，这些列和行可以随时更新。所以我想问大家的两个问题是：

• 我能做些什么来防止滞后
• 是否有可能在不中断互联网的情况下支持超过15列和30行的公式

---

您不需要在每个单元格上运行“刷新”。当一个单元格被更新时，如果其中有一个函数，它将引用一个特定的单元格、行或列。由于它包含该引用，您可以对其进行解析以确定需要更新哪些单元格。例如，您的

=（SUM（A1:A3）*C3）+B2

知道它只需要A1、A2、A3、C3和B2中的值，因此您可以直接引用这些单元格，而不是遍历所有内容。由于您知道要使用侦听器更新的最后一个单元格，因此可以解析单元格引用的数据，然后仅在这些单元格上运行脚本（如果触发事件的单元格中的数据需要更新）。您正在控制所有函数和用户选择数据的方式，以便知道何时需要更新某些内容。
我认为一个好的解决方案是处理回调，而不是遍历整个表
每次创建新公式时，都应该在该公式中查找引用的单元格，并添加一个处理程序，用于在每次引用单元格发生更改时更改调用该引用单元格的单元格
我对我的意思做了一个解释。使用它时要小心，可能会有很多问题，因为一旦你更改了公式，我就不会清理引用的单元格。无论如何，我认为这可能是一个清晰的例子
这个想法的核心在于下面的片段

$('input').on('change', function(){
  var referencedCells = getReferencedCells($(this).val());
  var $referencer = $(this);  

  for(var i=0 ; i<referencedCells.length; i++){  
    $(referencedCells[i]).on('change', function(){  
      updateValue($referencer);
    });
  }

  updateValue($referencer);

});

$（'input'）。在（'change'，function（）上{
var referencedCells=getReferencedCells（$（this.val（））；
变量$referencer=$（此变量）；
对于（var i=0；iWhy您必须循环每个单元格？公式只影响“this”单元格，您可以保留数组中其他单元格的值，仅在表单元格值更改时更改数组。因为，例如，如果公式位于C1中，而D1引用了C1，则D1需要更新其值。如果我要将所有值存储在n数组我仍然需要在每次更改单元格时更新值。在回答您对该问题的第二个评论时，如果使用我上面的示例，单元格A1引用了其他一些单元格，您可以解析该单元格中的数据，并完成对相关单元格所需的任何操作。您可以简单地在每个引用的单元格和In上运行foreach在ide中，检查是否有其他单元格被引用，并继续递归向下钻取，直到最后一个单元格被引用。每次被引用的单元格被更改时，是否仍有可能使站点延迟？如果B1是最初被引用的单元格，并且该单元格发生了更改，那么不仅需要更新引用B1的单元格，还需要更新引用B1的所有单元格e已更新的单元格也需要更新。如果可能，是否最好逐步更新必要的单元格，而不是尝试一次完成所有操作？当然，有些操作需要一些延迟-Excel中也会出现这种情况。但是，与上面的方法不同，不是每次触发任何事件都需要电子表格将导致延迟。此外，这些较长的操作将比导致整个表刷新的任何单个操作都要短，因为您仍然没有更新整个表。这是最好的方法。此外，由于您控制表上的所有操作，因此您知道，例如，SUM函数不会挂起除被调用的单元格外的任何单元格。因此，您不必遍历所有被引用的单元格引用，因为它们不会被更新。但是，如果您正在执行某种类型的写入操作，则必须递归地向下钻取。但是，由于您可以控制所有内容，因此不必执行此操作非常及时-只有在需要的时候。这看起来很有希望！目前我将每个公式存储在每个单元格的数据属性中，因此这已经得到了说明。目前正在工作，但稍后会尝试一下，谢谢！顺便说一句，刚刚注意到，当您引用具有公式而不是文字的单元格时，此简化版本将不起作用。另外，如果你有循环引用，它将进入无限循环。我会看看我是否能在以后解决第一个问题……我也在工作。好的，我编辑了这个示例，添加了一个简单的递归函数来计算单元格的值，始终不在表中迭代。山姆，这不允许你添加多个相同的“更改”吗单个单元格的侦听器？
$('input').on('change', function(){
  var referencedCells = getReferencedCells($(this).val());
  var $referencer = $(this);  

  for(var i=0 ; i<referencedCells.length; i++){  
    $(referencedCells[i]).on('change', function(){  
      updateValue($referencer);
    });
  }

  updateValue($referencer);

});