Question

新手到javaScript。我来自java和学习js。所以我很难找到如何在js中应用一个coms来停止一个函数running.am我应该使用布尔值？喜欢真假情况？如果是这样你怎么做？

<div class="upper">
     <div class="aniShell">
        <div class="aniOne ab"><img class="photo" src="<?php echo $img ?>"> </div>
        <div class="aniTwo ab"><img class="photo"src="<?php echo $img2 ?>">      </div>      <!--coming from includes/lastThreeOfBigHit-->
        <div class="aniThree ab"><img class="photo" src="<?php echo $img3 ?>">   </div>

        <div class='dotContainer'>
            <div class="dot"id="dot1"></div>
            <div class="dot"id="dot2"></div>
            <div class="dot"id="dot3"></div>
        </div>

        <div class="aniTitle a1"><?php echo ucwords($title)  ?><!--<br> <p><?php echo $desc ?></p>--></div>
        <div class="aniTitle a2"><?php echo ucwords($title2) ?><!--<br><p><?php echo $desc2 ?></p>--></div>
        <div class="aniTitle a3"><?php echo ucwords($title3) ?><!--<br> <p><?php echo $desc3 ?></p>--></div>
     </div>
        var x=0;
     function animate(){
            if(x==0){
            $(".aniTwo, .a2").hide(); $(".aniThree, .a3").hide();
            $("#dot1").addClass("black");
                       $("#dot1").addClass("black");
            function infinite(){


                setTimeout(function(){

                    $(".aniOne, .a1").fadeOut(); $(".aniTwo, .a2").fadeIn();
                           $("#dot1").removeClass("black");
                           $("#dot2").addClass("black");
                    }, 3000);

                setTimeout(function(){
                    $(".aniTwo, .a2").fadeOut(); $(".aniThree, .a3").fadeIn();
                          $("#dot2").removeClass("black");
                           $("#dot3").addClass("black");

                    }, 6000);

                setTimeout(function(){
                    $(".aniThree, .a3").fadeOut(); $(".aniOne, .a1").fadeIn();
                            $("#dot3").removeClass("black");
                           $("#dot1").addClass("black");


                    infinite();
                    },9000);
               }
            infinite();
           }else{alert("hi")}
           $("#dot1").click(function(){
                x=1;    //ISN'T IT SHOULD STOP FUNCTION RUNNING?

           });
      }

Answer 1

要停止运行绑定到setTimeout()的所有功能，您需要使用clearTimeout()方法清除所有计时器。

var x = 0;
var int1, int2, int3;

function animate() {
    if (x == 0) {
        $(".aniTwo, .a2").hide();
        $(".aniThree, .a3").hide();
        $("#dot1").addClass("black");
        $("#dot1").addClass("black");

        function infinite() {
            int1 = setTimeout(function() {
                $(".aniOne, .a1").fadeOut();
                $(".aniTwo, .a2").fadeIn();
                $("#dot1").removeClass("black");
                $("#dot2").addClass("black");
            }, 3000);
            int2 = setTimeout(function() {
                $(".aniTwo, .a2").fadeOut();
                $(".aniThree, .a3").fadeIn();
                $("#dot2").removeClass("black");
                $("#dot3").addClass("black");
            }, 6000);
            int3 = setTimeout(function() {
                $(".aniThree, .a3").fadeOut();
                $(".aniOne, .a1").fadeIn();
                $("#dot3").removeClass("black");
                $("#dot1").addClass("black");
                infinite();
            }, 9000);
        }
        infinite();
    } else {
        alert("hi")
    }
    $("#dot1").click(function() {
        clearTimeout(int1);
        clearTimeout(int2);
        clearTimeout(int3);
    });
}

Answer 2

您需要在if(x==0)函数中移动infinite()条件：

 var x=0;
 function animate(){
    // if(x==0){  //  <-- FROM HERE
    $(".aniTwo, .a2").hide(); $(".aniThree, .a3").hide();
    $("#dot1").addClass("black");
               $("#dot1").addClass("black");
    function infinite(){

        if (x==0){ // <-- TO HERE

        setTimeout(function(){

            $(".aniOne, .a1").fadeOut(); $(".aniTwo, .a2").fadeIn();
                   $("#dot1").removeClass("black");
                   $("#dot2").addClass("black");
            }, 3000);

        setTimeout(function(){
            $(".aniTwo, .a2").fadeOut(); $(".aniThree, .a3").fadeIn();
                  $("#dot2").removeClass("black");
                   $("#dot3").addClass("black");

            }, 6000);

        setTimeout(function(){
            $(".aniThree, .a3").fadeOut(); $(".aniOne, .a1").fadeIn();
                    $("#dot3").removeClass("black");
                   $("#dot1").addClass("black");


            infinite();
            },9000);
       }
       //infinite(); // <-- move down
   }
   else{
      alert("hi")
   }

   infinite(); // <-- to here

   $("#dot1").click(function(){
        x=1;    //ISN'T IT SHOULD STOP FUNCTION RUNNING?

   });
 }

Answer 3

作为快速解决方案，我认为您也可以在if(x==0)功能中添加infinite条件。

稍微修改一下你的功能可以让它变得更小

var x = 0,
currState = 0,
stateData = [
    ['.aniOne, .a1', '#dot1'],
    ['.aniTwo, .a2', '#dot2'],
    ['.aniThree, .a3', '#dot3']
];


function animate() {
    if (x == 0) {
        $("#dot1").click(function() {
            x = 1;
        });
        $(".aniTwo, .a2").hide();
        $(".aniThree, .a3").hide();
        $("#dot1").addClass("black");
        $("#dot1").addClass("black");
        infinite();
    }
}

function infinite() {
    if (x == 0) {
        setTimeout(function() {
            var nextState = (currState + 1) % 3;
            $(stateData[currState][0]).fadeOut();
            $(stateData[nextState][0]).fadeIn();
            $(stateData[currState][1]).removeClass("black");
            $(stateData[nextState][1]).addClass("black");
            currState = nextState;
            infinite();
        }, 3000);
    } else {
        alert("hi");
    }
}

如何在javascript中停止嵌套函数？

3 个答案: