针对 IE 优化 jQuery

发布于 2024-12-13 01:03:01 字数 903 浏览 0 评论 0原文

我有函数：

function doBlamingItem($cell, showEditMark) {
    $cell.hover(function () {
        $cell.toggleClass('clickable-cell', showEditMark).toggleClass('editing-cell', !showEditMark);
    }, function() {
        $cell.removeClass('clickable-cell editing-cell');
} );};

在 $(document).ready() 中，我将此函数应用于表格中的某些单元格（~500），当我将鼠标移到它上面时 - 在 FF 或 Chrome 中一切都好，但 IE7-9 开始滞后我不知道如何修复它:(

以及来自 $(document).ready() 的代码：

var i = firstRowOnPage();
while (table.GetRow(i) != null) {
    if (condition) {
        var row = table.GetRow(i);
        var elementInCellId = column.fieldName + '_' + rowKey;
        var $cell = $(row.cells[realIndex]).attr('id',elementInCellId);
        doBlamingItem($cell, true);
        setClickable(editInfo, $cell);
    }
i++;
}

我对每个单元格使用 doBlamingItem 因为其中一些单元格 showEditMark=true，其他单元格 showEditMark=false

原文

I have function:

function doBlamingItem($cell, showEditMark) {
    $cell.hover(function () {
        $cell.toggleClass('clickable-cell', showEditMark).toggleClass('editing-cell', !showEditMark);
    }, function() {
        $cell.removeClass('clickable-cell editing-cell');
} );};

in $(document).ready() I apply this function for some cells in my table (~500) and when I move my mouse upon it - in FF or Chrome all is okay, but IE7-9 starts lagging and I don't know how to fix it :(

and code from $(document).ready():

var i = firstRowOnPage();
while (table.GetRow(i) != null) {
    if (condition) {
        var row = table.GetRow(i);
        var elementInCellId = column.fieldName + '_' + rowKey;
        var $cell = $(row.cells[realIndex]).attr('id',elementInCellId);
        doBlamingItem($cell, true);
        setClickable(editInfo, $cell);
    }
i++;
}

I use doBlamingItem for every cell because for some of them showEditMark=true, for other showEditMark=false

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

被翻牌 2024-12-20 01:03:01

您的代码基本上 (1) 找到这大约 500 个元素，(2) 迭代它们以 (3) 分配悬停事件（由 mouseenter 和 mouseleave 组成）。您听说过委托事件吗？

设置时间几乎没有（只注册了 2 个事件处理程序，而不是 1000 个）。没有选择和遍历任何元素。

(function($, undefined){
  // if you want it global
  var showEditMark = true;
  // otherwise save that state to some element's data()

  $(function(){
    $(document.body).delegate('.your-table-selector td', {
      mousenter: function(e){
        $(this)
          .toggleClass('clickable-cell', showEditMark)
          .toggleClass('editing-cell', !showEditMark);
      },
      mouseleave: function(e){
        $(this).removeClass('clickable-cell editing-cell');
      }
    });
  });
})(jQuery);

Your code basically (1) finds those ~500 elements, (2) iterates them to (3) assign hover events (consisting of mouseenter and mouseleave). Have you heard of delegated events?

The setup time is virtually none (only 2 event handlers, instead of 1000 are registered). No elements are selected and traversed.

(function($, undefined){
  // if you want it global
  var showEditMark = true;
  // otherwise save that state to some element's data()

  $(function(){
    $(document.body).delegate('.your-table-selector td', {
      mousenter: function(e){
        $(this)
          .toggleClass('clickable-cell', showEditMark)
          .toggleClass('editing-cell', !showEditMark);
      },
      mouseleave: function(e){
        $(this).removeClass('clickable-cell editing-cell');
      }
    });
  });
})(jQuery);

回复收藏 0 原文