Javascript jQuery中用于显示从GetAPI对象生成的数字的计数器效果显示isNaN错误

我想显示我从我的API中得到的使用JSON的数字。 我想把反效果放在那里，它显示“isNaN”。 API URL返回一个对象并将总数保存在data.data中 有人能帮我吗

<p class="Count member-count" style="color:#BA1823; font-size: 40px;">
                <script>
                    $.getJSON('https://url.com/cmp/server/api/get-total-member', function(data) {
                        var text = `${data.data}<br>`
                        $(".member-count").html(text);
                    });
                </script>
            </p>
            <script>
                $('.Count').each(function () {
                  var $this = $(this);
                  jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
                    duration: 1000,
                    easing: 'swing',
                    step: function () {
                      $this.text(Math.ceil(this.Counter));
                    }
                  });
                });
            </script>

$.getJSON（'https://url.com/cmp/server/api/get-total-member，函数（数据）{
var text=`${data.data}
`
$（“.member count”）.html（文本）；
});

$（'.Count'）。每个（函数（）{
var$this=$（this）；
jQuery（{Counter:0}）.animate（{Counter:$this.text（）}{
持续时间：1000，
放松:"摇摆",，
步骤：函数（）{
$this.text（Math.ceil（this.Counter））；
}
});
});

问题是因为AJAX调用是异步的，因此包含动画逻辑的

each（）

循环在请求完成之前运行，并且

p

元素具有任何内容

要解决此问题，请将

each（）

调用放在AJAX回调中：

$.getJSON（'https://url.com/cmp/server/api/get-total-member，函数（数据）{
$（“.member count”）.html（`${data.data}
`）；
$（'.Count'）。每个（函数（）{
var$this=$（this）；
jQuery({
柜台:0
}).制作动画({
计数器：data.data
}, {
持续时间：1000，
放松:"摇摆",，
步骤：函数（）{
$this.text（Math.ceil（this.Counter））；
}
});
});
});

。成员计数{
颜色：#BA1823；
字体大小：40px；
}

---

<>也值得注意的是，你不应该在HTML结构的中间放置<代码> <代码>标签。将它们放在

中，或放在

之前。同样，不要将CSS规则放入内联

style

属性中。将它们放在外部的.css文件中。下面是一个完整的HTML和JS更正的示例。

或

Math.ceil（+this.Counter）'jquery.min.js:2 GET net:：ERR\u CONNECTION\u TIMED\u OUT'数据返回issues@VanquishedWombat这是不必要的，因为
步骤将类型强制为整数：API是否可能以字符串形式返回数字，但Math.ceil（）函数需要一个数值变量。也许，试试Math.ceil（parseInt（this.Counter，10））。有没有理由投反对票？下面是一个没有AJAX请求的工作示例：