javascript/jquery 泄漏和崩溃的浏览器

Question

让我先说一下实际上是我的糟糕代码泄漏并导致我的浏览器崩溃，我只是想我最好从一开始就尽可能清楚地使用所使用的语言。

我有一个测试页面here，可以在here 找到javascript。我的问题是，当我尝试多次拖放任何一个红色块时，它会占用所有浏览器资源并使浏览器崩溃。我相当确定罪魁祸首是 Tracker() 对象中的以下函数，但我完全不知道如何调试它。

我目前最有可能的罪魁祸首：

  function register_draggable(ob) {
      ob.config.jqId.draggable({cursor: 'move',
                              grid:[ob.config.size, ob.config.size],
                              containment: '#chessboard',
                              revert: 'invalid',
                              start: function() {
                                check_allowable_moves(ob.config.jqLocation,
                                                      ob.config.jqId,
                                                      ob);
                              },
                              stop: function() {
                                remove_allowable_moves();
                              }
                            });
  }

如果有人可以快速浏览一下并就我应该寻找什么给我任何建议，我们将不胜感激。

解决方案 原来register_draggable() 是罪魁祸首。每次更新片段的位置并且同一对象上的所有那些可拖动对象都在做讨厌的事情时，我都会注册一个新的可拖动对象。 目前，我现在明确地在创建新的可拖动对象之前销毁旧的可拖动对象。当前代码是

    function register_draggable(ob) {
    ob.config.jqId.draggable('destroy');
    ob.config.jqId.draggable({cursor: 'move',
                              grid:[ob.config.size, ob.config.size],
                              containment: '#chessboard',
                              revert: 'invalid',
                              start: function() {
                                check_allowable_moves(ob.config.jqLocation, 
                                                      ob.config.jqId, 
                                                      ob);
                              },
                              stop: function() {
                                remove_allowable_moves();
                              }
                            });
  }

Answer 1

我认为这实际上不是您的问题，但您似乎对 register 和 check_allowable_moves 进行了额外的方法调用

return {
        register_map: function(ob) { map = ob; },
        register_piece: function(ob) {
          ob.config.tracker = this;
          register_draggable(ob);
        },
        register_draggable: function(ob) { register_draggable(ob); },
        check_allowable_moves: function(location, jqPiece, ob) { check_allowable_moves(location, jqPiece, ob); }
      }

可以缩短为

return {
        register_map: function(ob) { map = ob; },
        register_piece: function(ob) {
          ob.config.tracker = this;
          register_draggable(ob);
        },
        register_draggable: register_draggable,
        check_allowable_moves: check_allowable_moves
      }

还有

您在这里进行双重查找：

function remove_allowable_moves() {
        $('.allowable').droppable('destroy');
        $('.allowable').removeClass('allowable');
      }

应该是

function remove_allowable_moves() {
        $('.allowable').droppable('destroy')
          .removeClass('allowable');
      }

还有

将 int 解析为浮点数的目的是什么？去掉 parseFloat。

var x = parseInt(locs[1]);
var y = parseInt(locs[2]);
var x_min = parseFloat(x)-2;
var y_min = parseFloat(y)-2;

终于

为什么要重新注册为可拖放的？如果您多次注册可拖动对象并且只销毁一次，这可能是罪魁祸首。

jqCell.droppable({ accept: '#'+jqPiece.attr('id'),
                  drop: function(ev, ui) {
                    ob.config.jqLocation = $(this);
                    register_draggable(ob);  // why this?
                  }
                });

其他想法

另一件事我不知道它是否会帮助您提高性能，但它可以清理您的代码。 jquery 选择器允许使用逗号而不是

$('#coord-1-1').doStuff();
$('#coord-1-2').doStuff();
$('#coord-1-3').doStuff();

你可以的

$('#coord-1-1, #coord-1-2, #coord-1-3').doStuff();

所以你的循环只关心生成选择器字符串，然后你可以在整个集合上运行你的操作。

IMO 更清洁的初始化

而不是

var map = new Map('content');
var piece1 = new Piece(map);
var piece2 = new Piece(map);
var tracker = new Tracker;
tracker.register_map(map);
map.render();
piece1.render('coord-4-4', '1');
piece2.render('coord-1-1', '2');
tracker.register_piece(piece1);
tracker.register_piece(piece2);

我想看看

$(document).ready(function() {
    $('#content').MapGame({
        pieces : { '1' : 'coord-4-4', '2' : 'coord-1-1' }
    });
});

现在实现它是你现在所拥有的一个延伸，但是在为 jQuery 构建组件时，我喜欢从一个简单的 init 开始并从它们开始工作。 jQuery 的一大目标就是向用户隐藏所有垃圾，让他们轻松启动插件实例。

Answer 2

感觉有些事件处理程序被注册了多次，但我不确定。 （原因如下。）

---

这并不能回答问题，但您绝对应该在$(document).ready(…) 之外放置尽可能多的代码，决不能像现在这样将所有代码都放在那里。

我担心您的代码太不合格，以至于理解它的工作量太大。你能重组它吗（所有那些函数中的函数真的很难读。）并添加一些 cmets。

也许只有我一个人，但我觉得它太难阅读和理解了。维护它肯定会是一场灾难。