javascript / jquery утечка и сбой браузера - PullRequest
Новая
       13

javascript / jquery утечка и сбой браузера

1 голос
/ 05 февраля 2009

Позвольте мне просто предисловие, сказав, что это на самом деле мой дерьмовый код, который пропускает и ломает мой браузер. Я просто подумал, что лучше сделать языки, которые я использую, с самого начала как можно более понятными.

У меня есть тестовая страница здесь , а 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();
                              }
                            });
  }

Ответы [ 2 ]

3 голосов
/ 06 февраля 2009

Я не думаю, что это на самом деле ваша проблема, но похоже, что вы делаете дополнительный вызов метода для регистра и 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 в float? Сними 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();

так что ваш цикл будет связан только с генерацией строки селектора, и тогда вы сможете выполнить свою операцию над всем множеством.

ИМО чище инициат

вместо 

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 - спрятать все ненужные вещи от пользователя и просто позволить им раскрутиться и легко скопировать ваш плагин.

0 голосов
/ 06 февраля 2009

Такое ощущение, что некоторые обработчики событий регистрируются несколько раз, но я не уверен. (Причина ниже.)

Это не отвечает на вопрос, но вам абсолютно необходимо поместить как можно больше кода вне $(document).ready(…), ни в коем случае не помещать весь свой код туда, как вы делаете сейчас.

Я боюсь, что ваш код настолько неприемлем, что слишком много работы, чтобы его понять. Не могли бы вы реструктурировать его (все эти функции действительно ужасно читать?) И добавить несколько комментариев.

Может быть, это только я, но мне трудно читать и понимать. Это наверняка будет катастрофой для поддержания.

...