如何设置简单定时器？能否仅用一个setTimeout而非调用两次？

嘿，我看到你在MenuComponent里折腾setTimeout的时候踩了个小坑——你想一次调用就让两个操作都等2秒再执行，但burger的状态立刻就变了，根本没按预期延迟，对吧？

问题出在哪？ #

你误解了setTimeout的参数结构哦！它的语法是这样的：

setTimeout(callbackFunction, delayInMs, ...argsForCallback);

• 第一个参数是延迟后要执行的函数
• 第二个是延迟时间（毫秒）
• 后面的参数是传给回调函数的参数，不是新的定时任务

你原来写的代码里，this.burger = "croix"是直接同步执行的，根本没被放进延迟逻辑里，所以它会立刻生效，不会等2秒。

正确写法：一次setTimeout搞定两个操作 #

当然可以只调用一次setTimeout！只要把两个需要延迟的操作都塞进同一个回调函数里就行，这样它们都会乖乖等2秒后执行。

修改你的组件代码（注意修正语法错误，比如不要把方法嵌套在ngOnInit里）：

export class MenuComponent implements OnInit {
  public cacheMenu = "block";
  public burger = "";
  public show = false;
  @Output() sendBasculContact = new EventEmitter();

  ngOnInit() {
    // 如果需要初始化时就触发延迟逻辑，把setTimeout放这里也可以
  }

  bascule() {
    this.show = !this.show;
    this.sendBasculContact.emit();
  }

  onSelectMenu() {
    // 把两个操作都放进同一个回调函数里
    setTimeout(() => {
      this.cacheMenu = "none"; // 2秒后隐藏菜单
      this.burger = "croix";   // 同时切换burger状态
    }, 2000);
  }
}

这样写之后，cacheMenu和burger的状态都会在2秒后同时更新，完全符合你的需求，而且只调用了一次setTimeout~

内容的提问来源于stack exchange，提问作者geek pédagogique lcms