切换类上的jQuery设置超时

我有一个按钮，只有当它点击某个媒体查询时才会出现。现在工作正常，按钮出现，单击按钮将显示sidenav。再次单击将关闭菜单

我的问题是——我有一个类也可以用它来切换，叫做“open”。这使我能够使用不同的图标来表示打开和关闭。但是我需要切换类上的延迟，以便在菜单栏关闭之前图标不会更改

$(document).ready(function() {
        /* prepend category button */
        $('.side-bar').before('<div id="button"><p class="sidebar-button"> Menu </p></div>'); //insert html for menu button

            $(".sidebar-button").click(function() { //click menu button and do..

                setTimeout(function(){ //i added this..

              $(".side-bar").slideToggle(); //toggle sidebar
              $(this).toggleClass("open"); // toggle class on button for 'open'
            });
        },5000); // other part of the seTimeout
    });

$（文档）.ready（函数（）{
/*前置类别按钮*/
$（'.sidebar'）。在（'
菜单之前；//为菜单按钮插入html
$（“.sidebar按钮”）。单击（函数（）{//单击菜单按钮并执行。。
setTimeout（函数（）{//我添加了这个。。
$（“.side bar”）.slideToggle（）；//切换侧栏
$（this）.toggleClass（“打开”）；//打开“打开”按钮上的类
});
}，5000）；//设置的其他部分
});

实现这一目标的最佳方式是什么？就本问题而言，现场示例：

编辑

这可能有助于寻找类似事物的人。我在这里找到了解决方案：

---

注意：我最后更改了下面答案上的代码。它现在工作得很好。

完成后，使用菜单的回调来切换图标的类别

      $reference = $(this)

      $(".side-bar").slideToggle(function(){
            $reference.toggleClass("open");           
      });

我在CSS中添加了一个.open类，以便在展开时将单词菜单变成黄色

---

只有当切换动画设置为与超时相同时，使用setTimeout才会起作用，如果一个人的菜单上有更多或更少的项目，则该菜单将不起作用。这就是为什么您可以设置回调在第一个函数完成时执行的原因。当我查看源代码中的类切换时，这不起作用。这门课没有被申请吗？如果我理解正确，我的解决方案是有缺陷的，因为如果我的菜单有更多的项目，并且切换完成所需的时间增加，图标将再次不同步？我只是添加了一个打开的类来显示它的工作，当菜单项准备就绪时，菜单字将变为黄色。是的，菜单上的项目或多或少会不同步