增量计数器Javascript/JQuery

Incremental counter Javascript/JQuery

本文关键字：JQuery Javascript 计数器      更新时间：2023-09-26

我正在努力弄清楚如何让这个计数器工作。播放了一定数量的动画后，我想刷新页面。我知道我的代码很糟糕。我没有受过这方面的教育，而且我还是个新手，更不用说现在很难集中精力（至少可以说）。。。所以要友善。这是：

$(document).ready(function () {
    function loop() {
        var p = 0;
        if (p = 3) {
            location.reload(true);
        } else {
            $("#p3").delay("1000").fadeIn("slow");
            $("#p3").delay("1000").fadeOut("slow", loop);
            p + 1;
        };
        loop();
    });

if (p = 3)语句使用的是赋值运算符=，而不是比较运算符===或==。所以p被分配给3，结果是真的，所以else语句永远不会被执行。

此外，p变量是在loop()函数中声明的，因此每次调用函数时都会重置它——您可以将该声明移动到函数之前（将其保留在文档就绪处理程序中：无需将其设置为全局）。

此外，行p + 1;也没有做任何事情：它不会增加p，因为您需要用p = p + 1将结果分配回p，简称为p += 1或仅为p++。

最后，您发布的代码有一个语法错误：loop()函数中缺少结束}。我想目的是结束函数，然后调用它，所以：

$(document).ready(function () {
    var p = 0;  // <--- moved outside function
    function loop() {
        if (p === 3) {   // <-- changed = to ===
            location.reload(true);
        } else {
            $("#p3").delay("1000").fadeIn("slow");
            $("#p3").delay("1000").fadeOut("slow", loop);
            p++; // <-- changed from p + 1
        };
    } // <--- this is the missing bracket
    loop();
});

我做了一些假设，写了我认为是你想要的东西，代码是未经测试的

将其更改为：

$(document).ready(function () {
    var globalP = 0;
     //this is called when fadeOut completes.
    function fadeComplete() {
       if (globalP == 3) {//if it is 3 reload..
            location.reload(true);
        } else {
            globalP++;//increment counter 
            animate();//start animation again...
        }
    }
    function animate() {
       //start fading in...
       $("#p3").delay("1000").fadeIn("slow", function() {
           //start fading out when the fadeIn completes.
            //should this happen? Since you're fading in the SAME element.
          $("#p3").delay("1000").fadeOut("slow", fadeComplete);
       });
    };
    animate();
});
相关文章：