在大型JavaScript应用程序中，我有一个类似的情况：
var $box = $('#box');
var expensiveOperation = function () {
for (var i = 0; i < 10000; i++) {
for (var j = 0; j < 4500; j++) {
Math.random();
}
}
};
$('#show').click(function () {
$box.show();
expensiveOperation();
});
$('#showDefer').click(function () {
$box.show();
_.defer(expensiveOperation);
});
$('#hide').click(function () {
$box.hide();
expensiveOperation();
});
$('#hideDefer').click(function () {
$box.hide();
_.defer(expensiveOperation);
});#box {
background-color:red;
width:100px;
height:100px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box"></div>
<button id="show">show</button>
<button id="showDefer">show defer</button>
<button id="hide">hide</button>
<button id="hideDefer">hide defer</button>jsFiddle链接，以防万一：http : //jsfiddle.net/oymaterz/5/
我想隐藏或显示DOM元素并执行昂贵的操作。出于性能原因，我要始终确保首先执行显示/隐藏（即在执行堆栈的顶部）。我提供的示例（使用下划线的延后）及其在最新版本的Chrome中的运行情况都很好地证明了这一点。另外，上面的示例不适用于IE11。隐藏/显示推迟了它的速度。
但是，当我在应用程序中执行相同操作时，它只能间歇性地工作，奇怪的是IE11似乎始终可以正常工作。
关于我为什么要得到这种行为的任何想法？
我找到了解决问题的办法。尽管预计（.setTimeout 1的）_.defer应该可以工作……在我的情况下，它并不是很一致。所以我最终使用了requestAnimationFrame方法。这是更新的版本：
var expensiveOperation = function () {
for (var i = 0; i < 10000; i++) {
for (var j = 0; j < 4500; j++) {
Math.random();
}
}
};
var $box1 = $('#box-1');
$('#show-1').click(function () {
$box1.show();
expensiveOperation();
});
$('#showDefer').click(function () {
$box1.show();
_.defer(expensiveOperation);
});
$('#hide-1').click(function () {
$box1.hide();
expensiveOperation();
});
$('#hideDefer').click(function () {
$box1.hide();
_.defer(expensiveOperation);
});
var $box2 = $('#box-2');
$('#show-2').click(function () {
$box2.show();
expensiveOperation();
});
$('#showRequestAnimationFrame').click(function () {
var flag = true;
requestAnimationFrame(function showAnimFrame(){
if(flag) {
$box2.show();
flag = false;
requestAnimationFrame(showAnimFrame);
} else expensiveOperation();
});
});
$('#hide-2').click(function () {
$box2.hide();
expensiveOperation();
});
$('#hideRequestAnimationFrame').click(function () {
var flag = true;
requestAnimationFrame(function showAnimFrame(){
if(flag) {
$box2.hide();
flag = false;
requestAnimationFrame(showAnimFrame);
} else expensiveOperation();
});
});#box-1 {
background-color:red;
width:100px;
height:100px;
}
#box-2 {
background-color:blue;
width:100px;
height:100px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box-1"></div>
<button id="show-1">show</button>
<button id="showDefer">show defer</button>
<button id="hide-1">hide</button>
<button id="hideDefer">hide defer</button>
<p></p>
<div id="box-2"></div>
<button id="show-2">show</button>
<button id="showRequestAnimationFrame">show requestAnimationFrame</button>
<button id="hide-2">hide</button>
<button id="hideRequestAnimationFrame">hide requestAnimationFrame</button>jsFiddle链接，以防万一：http : //jsfiddle.net/oymaterz/6/
值得一提的是，IE8不支持requestAnimationFrame。如果您需要支持，我建议您使用Paul Irish出色的GIST，以实现跨浏览器的兼容性。
我希望这会对与我类似的情况有所帮助。现在，对我来说，它显然可以正常工作，并且可以挽救生命。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句