如何实现 在某个动画加载过程中判断是否加载完成?

Question

组件用的是 Bootstrap4 Collapse + Fontawesome

icon是自己加的 (向右代表折叠, 向下代表展开), 目前的效果图如下

实现是在按钮click事件里判断这个按钮是否存在collapsed, 并改变icon的样子
现在有个问题, 如果用户频繁点击, 可能会出现一个bug, 如下图

就是箭头向右, 但是下面的ul还是展开的状态
想知道出现这种情况, 一般是如何解决的?
"在某个动画加载过程中判断是否加载完成" 是我能想到的一种思路, 但是不知道如何实现

以下是核心代码

function iconEvent(icon) {
  icon.addClass("fa-solid fa-angle-right")
  icon.parent().click(function() {
    if (icon.parent().hasClass("collapsed")) {
        icon.removeClass("fa-angle-right")
        icon.addClass("fa-angle-down")
    } else {
        icon.removeClass("fa-angle-down")
        icon.addClass("fa-angle-right")
    }
  })
}

页面渲染的html如下

Answer 1

1、添加节流，即即使用户快速点击，也仅是按照一定时间间隙切换。

2、尝试改写代码

 icon.parent().click(function() {
+    if ($(this).hasClass("collapsed")) {
-    if (icon.parent().hasClass("collapsed")) {
+        icon.stop().removeClass("fa-angle-right").addClass("fa-angle-down")
-        icon.removeClass("fa-angle-right")
-        icon.addClass("fa-angle-down")
    } else {
+        icon.stop().removeClass("fa-angle-down").addClass("fa-angle-right")
-         icon.removeClass("fa-angle-down")
-        icon.addClass("fa-angle-right")
    }
  })

Answer 2

方案1 -> 将需要执行的逻辑放在 shown.bs.collapse 或 hidden.bs.collapse 里, 如下

<p>
          <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
            Link with href
          </a>
          <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
            Button with data-target
          </button>
        </p>
        <div class="collapse" id="collapseExample">
          <div class="card card-body">
            Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
          </div>
        </div>
        
        <script>
            $('.collapse').on('shown.bs.collapse', function () {
              console.log('显示完成');
            })
            
            $('.collapse').on('hidden.bs.collapse', function () {
              console.log('隐藏完成');
            })
        </script>

方案2 -> 防抖或节流处理