Question

我正在创建一个应用程序来监控群集上的节点，这是可视状态的一个示例。网格中的每个小方框代表一个节点，当前，当悬停在一个节点上时，其余部分位于相应的机架（网格）淡出中。

这是通过photobucket的链接，因为由于我的声誉很小，我无法插入图片： visual state

在Chrome和Firefox中，悬停进出单个节点会立即淡出/退出机架中的其余节点，但在IE 11中它有明显的延迟。我知道IE浏览器的javascript引擎比Chrome和Firefox慢，但是我把它扔到那里看看SO社区是否可以分开我的代码并提出更好的方法，因为我不是最伟大的前端程序员。谢谢，这里是我的代码片段：

来自django模板的

（每个节点都有id="matrix-box-<node #>"）：

    <tr>
    <td id="visual-state"><b>visual state</b></td>
    <td id="matrix" colspan=5>
        {% for row in v.22 %}
            {% if v.23 == "ca" %}
                {% if forloop.counter0|divisibleby:4 %}
                    <div id="rack-{% widthratio forloop.counter0 4 1 %}-{{ k }}" title="rack-{% widthratio forloop.counter0 4 1 %}">
                {% endif %}
            {% elif v.23 ==  "cs" %}
                {% if forloop.counter0|divisibleby:8 %}
                    <div id="rack-{% widthratio forloop.counter0 8 1 %}-{{ k }}" title="rack-{% widthratio forloop.counter0 8 1 %}">
                {% endif %}
            {% endif %}
            <div class="row">
            {% for elem in row %}
                {% if elem.1 == "#49E20E" %}
                    <div class="node node-faded" id="matrix-box-{{ elem.0 }}-{{ k }}" style="background: #00DC00;" title="{{ elem.0 }}"></div>
                {% elif elem.1 == "#0000CD" %}
                    <div class="node node-faded" id="matrix-box-{{ elem.0 }}-{{ k }}" style="background: #0000CD;" title="{{ elem.0 }}"></div>
                {% elif elem.1 == "yellow" %}
                    <div class="node node-faded" id="matrix-box-{{ elem.0 }}-{{ k }}" style="background: yellow;" title="{{ elem.0 }}"></div>
                {% elif elem.1 == "#E3170D" %}
                    <div class="node node-faded" id="matrix-box-{{ elem.0 }}-{{ k }}" style="background: #E31702;" title="{{ elem.0 }}"></div>
                {% elif elem.1 == "brown" %}
                    <div class="node node-faded" id="matrix-box-{{ elem.0 }}-{{ k }}" style="background: #6E3737;" title="{{ elem.0 }}"></div>
                {% elif elem.1 == "orange" %}
                    <div class="node node-faded" id="matrix-box-{{ elem.0 }}-{{ k }}" style="background:#DC7800;" title="{{ elem.0 }}"></div>
                {% elif elem.1 == "black" %}
                    <div class="node node-faded" id="matrix-box-{{ elem.0 }}-{{ k }}" style="background: black;" title="{{ elem.0 }}"></div>
                {% elif elem.1 == "#cccccf" %}
                    <div class="node node-faded" id="matrix-box-{{ elem.0 }}-{{ k }}" style="background: #CCCCCF;border: 1px solid #CCCCCF"></div>
                {% endif %}
            {% endfor %}
            </div>

       ... other code

来自css代码：

    .node {
        width: 4px;
        height: 4px;
        float: left;
        border: 1px solid #B0B0B0;
        background: #cccccf;
        margin: 0 !important;
        cursor: pointer;
        filter: alpha(opacity=100);
        opacity: 1;
        }

    .faded .node-faded {
        width: 4px;
        height: 4px;
        filter: alpha(opacity=50);
        opacity: .5;
     }

    .active {
        width: 4px;
        height: 4px;
        float: left;
        border: 1px solid black;
        background: #cccccf;
        margin: 0 !important;
       cursor: pointer;
       filter: alpha(opacity=100);
       opacity: 1;
     }

来自js代码：

    var node = null;
    var node_id = null;
    var rack = null;
    var nodes = null;

    $(document).ready(function(){
        $('[id^=matrix-box]').on({
            mouseenter: function(){
                node = $(this);
                rack = node.parent().parent();
                rack.addClass('faded');
                node.removeClass('node-faded').addClass('active');
            },
            mouseleave: function(){
                node.removeClass('active').addClass('node-faded');
                rack.removeClass('faded');
            },
            click: function(e){

            ...other code

此外，任何建设性的批评（虽然有用而非恶意）总是受欢迎的。再次感谢！

Answer 1

由于你没有考试的可能性，这是一种猜谜游戏。你做的是以下几点：

$('[id^=matrix-box]').on({ mouseenter: function(){});

这会在每个元素上添加一个新的事件侦听器，其id以matrix-box开头。这不是最糟糕的想法，但如果你有这些物品，它可能会很慢。

以下是验证此内容的演示：http://jsfiddle.net/k3mjmdzp/3/

克服性能问题的一个好主意是使用delegated event listener。

尝试重写您的代码：

$(function () {
    $('#matrix').on('mouseenter mouseleave click', '[id^=matrix-box]', function (event) {
        console.log(event);
    });
});

在这里您有演示：http://jsfiddle.net/k3mjmdzp/2/

这将使您的代码仅在$('#matrix')上具有事件侦听器，而不是在每个子节点上。如果您稍后通过ajax附加新项目，这也很好。

您可以在Chrome开发者工具的event Listeners标签上查看事件监听器。

enter image description here

IE 11中的jquery addClass和removeClass变慢

1 个答案: