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

Question

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

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

在最后一个语句中，如果我删除函数集超时，则在#sub-section上没有设置显示属性为无。我刚才知道了这里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毫秒后应用于您的元素。我认为这样做是因为上面你已经调用hide函数2次，这个函数将用于动画，这需要一些时间。所以你的hide函数将完成他的大约less or equal to 100 milliseconds比display: none将被应用

Answer 2

我希望你能在这里找到答案。并且还可以更改时间值并观察输出，然后您就会明白了。

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

没有功能：

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