setTimeout函数为何无法停止代码执行？

Question

我遇到了setTimeout的问题。

$current.removeClass(class2);
setTimeout(function(){$current.css('display', 'none')},1000);
if(!$current.is('#' + id)){
    $('#' + id).css('display','block');
    setTimeout(function(){$('#' + id).addClass(class2)}, 1000);
    $current = $('#' + id);
}

我希望css "display:none"在添加后再执行if语句。我该怎么做？我认为setTimeout会停止代码的执行，然后在函数运行后继续执行。

- Frederik Witte

---

把所有想要在“超时”后执行的东西写进回调函数里。Javascript没有类似于“Sleep(1000)”的功能。 - Matt Burland

setTimeout并不会停止代码的执行。这就是setTimeout的全部意义 - 它是异步的。 - soktinpk

抱歉如果我错了，但是我认为setTimeout没有回调函数？ - Frederik Witte

@FrederikWitte：你认为你传递给setTimeout的函数是什么？它是一个回调函数。 - Matt Burland

哦，那我没有完全了解这个术语。我以为你的意思是类似于setTimeout(function(),delay,callback)这样的东西。 - Frederik Witte

Answer 1

你需要将代码放在函数内部，在超时时间内执行（代码间距也很重要...）：

$current.removeClass(class2);
setTimeout(function() {
    $current.css('display', 'none')

    if( !$current.is('#' + id) ) {
        $('#' + id).css('display','block');
        setTimeout(function() {
            $('#' + id).addClass(class2)
        }, 1000);
        $current = $('#' + id);
    }
},1000); 

- tymeJV

Answer 2

setTimeout函数将在n毫秒后运行该函数，但是脚本的其余部分将继续运行。

如果您希望代码在display:none之后才运行，您需要将其移入该函数中：

$current.removeClass(class2);
setTimeout(function(){
  $current.css('display', 'none');

  if(!$current.is('#' + id)){
    $('#' + id).css('display','block');
    setTimeout(function(){
        $('#' + id).addClass(class2);
    }, 1000);
    $current = $('#' + id);
  }
},1000);

- Richard Parnaby-King