javascript - JS 对参数/变量值的条件？

Question

我正在尝试在进度条脚本上做一些非常简单的事情，但我不存在的 JavaScript 知识让我有点挣扎。

我所拥有的看起来像这样:

if (progress == 100) {
    var element = document.getElementById("avatar-progress");
    element.classList.add("finish");
    setTimeout(function () {
        $('#avatar-progress').circleProgress(
            'value',
            0
        );
    }, 250);
                }

if ($('#avatar-progress').circleProgress('value') == 0) {
    var element = document.getElementById("avatar-progress");
    element.removeAttribute("class");
}



$('#avatar-progress').circleProgress({
    value: 0,
    size: 156,
    fill: { color: "#60bcff" },
    emptyFill: "#ffffff",
    thickness: 2,
});

基本上这个进度条发生的事情是这样的:

当上传达到100%时:在#avatar-progress中添加一个类以获得炫酷的脉冲效果，然后，在脉冲动画所需的延迟之后，该值被设置回0，使进度条消失，并准备好下次上传。

但是，为了脚本的缘故，我必须等待值返回到 0 才能删除该类(如果不这样做，脉冲动画将不会再次加载)。

这就是我未能做到的，我不知道如何编写它，正如您在我的代码中看到的那样，我尝试了一些东西:

if ($('#avatar-progress').circleProgress('value') == 0) {
    var element = document.getElementById("avatar-progress");
    element.removeAttribute("class");
}

但是我的条件不行。我正在寻找一些帮助来以正确的方式编写这一行。谢谢您的建议

Answer 1

实际上，您可以在 setTimeout 函数中执行这两件事:

if (progress === 100) {
  var element = document.getElementById('avatar-progress');
  element.classList.add('finish');
  setTimeout(function () {
    $('#avatar-progress').circleProgress('value', 0);
    element.classList.remove('finish');
  }, 250);
}

注意不要忘记在 JavaScript 中使用三等号 (===)，以确保比较正确。