how to stop a nested function in javascript?

novice to javaScript. i am coming from java and learning js. so i am having trouble finding how to apply a comdition in js that stops a function from running.am i supposed to use boolean? like true false condition?if so how you do it?

<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?

           });
      }

Answers 1

  • As a quick fix, I think you can add the if(x==0) condition inside your infinite function too.

    A slight modification of your function can make it a little smaller

    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");
        }
    }
    

Related Articles