无法理解这段代码中settimeout的逻辑

Question

我必须在按钮上隐藏一些小节，这是代码

 $('#myButton').on('click', function (event){
    event.preventDefault();
    $('#panel').hide();
    $('#header').hide();
    setTimeout(function(){ $('#sub-section').attr('style','display:none;'); }, 100);
});

在最后一条语句中，如果我删除了功能设置超时，则不会在#sub-section上将display属性设置为none。 我刚刚才知道，这里settimeout的实际需要是什么。 它也应该在没有settimeout的情况下工作。

如果函数hide花费太多时间执行，我已经尝试过

$('#panel').attr('style','display:none;');
$('#header').attr('style','display:none;');
$('#sub-section').attr('style','display:none;');

也，但是它不起作用。 仅在第3条声明中。

Answer 1

在这种情况下， display: none 100毫秒后将不会应用到display: none元素。 我想这样做是因为上面您两次调用了hide函数，该函数将与动画一起使用，这将需要一些时间。 因此，您的hide函数将在比display: none less or equal to 100 milliseconds大约less or equal to 100 milliseconds时间内完成他的操作display: none应用

Answer 2

我希望你能在这里找到答案。 并更改定时值并观察输出，您将了解。

[http://jsfiddle.net/mxgtaLzw/2/]

没有功能：

[http://jsfiddle.net/mxgtaLzw/3/]