Question

你能看出为什么以下导致IE崩溃的原因吗？我必须基本上对所有内容进行评论，并最终发现这导致崩溃，更具体地说，当.addClass和/或.removeClass在if条件中运行时：

if ( percentExpenses > 50 && percentExpenses < 80 ) {
    $('.progress-bar-expenses')
        .removeClass('progress-bar-success')
        .addClass('progress-bar-warning');
} else if ( percentExpenses >= 80 ) {
    $('.progress-bar-expenses')
        .removeClass('progress-bar-success progress-bar-warning')
        .addClass('progress-bar-danger');
} else {
    $('.progress-bar-expenses')
        .addClass('progress-bar-success');
}

我只是添加了旧的bootstrap进度条属性。其中一个属性会导致问题吗？

.progress-bar-danger {
    background-color: #dd514c;
    background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35));
    background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
    background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
    background-image: linear-gradient(to bottom, #ee5f5b, #c43c35);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffc43c35', GradientType=0);
}

直播示例： http://jsfiddle.net/Hs37H/1/

在Windows 7上使用IE11

Answer 1

这里的任何内容都不一定会导致Internet Explore崩溃，但是这些类中的一个完全有可能添加自身导致Internet Explorer崩溃的转换或动画。我已经看到transition: all 1s崩溃Chrome和Internet Explorer等内容。

除了这种可能性之外，这里没有任何东西会使浏览器崩溃。

审核演示后更新

以下行似乎导致Internet Explorer 9,10和11中的冻结（8不受影响）：

$('.progress').bind("DOMSubtreeModified",function(){
    percentage();
});

$('.table').bind("DOMSubtreeModified",function(){
    loadChart();
});

这里的问题是第一个函数向元素添加类，触发DOMSubtreeModified事件，调用percentage()，这会添加类，触发DOMSubtreeModified事件，...你明白了，对吧？

如果您访问了Mozilla Developer Network documentation for this event，则会阅读以下内容：

对于此事件要非常小心，如果您决定更改事件处理程序中的DOM，则很容易导致无限循环。

您的事件处理程序确实通过添加和/或删除类来更改DOM。您的loadChart()方法会添加或删除canvas元素，这可能会触发更多DOMSubtreeModified个事件

解决方案

此问题的解决方案是在运行percentage或loadChart时自行通知应用程序。您可以使用jQuery的.trigger方法并订阅自定义事件来完成此操作：

$(".progress").on("percentage", percentage);
$(".table").on("loadChart", loadChart);

在上面的示例中，当.progress上触发自定义“百分比”事件时，我们将通过调用percentage函数进行响应。同样适用于loadChart事件和函数。现在剩下的就是自己触发这些事件：

function doSomethingMagical ( ajax ) {
    ajax.success(function () {
        // This results in the calling of function:percentage
        $(".progress").trigger("percentage");
    });
}

导致IE冻结的Javascript代码（.addClass和.removeClass）

1 个答案:

审核演示后更新

解决方案