How to listen for click event inside same event Javascript

Question

What I want is for the div element to move around until it is clicked again, upon which it should stop at its current location. Is there a specific way to listen for the same event inside the event? Moving the div around is not the issue. I just can't figure out how to get it to stop. Can anyone explain to me why what I have isn't working?

var clickTracker = false;

$("#div3").click(function() {
     if(clickTracker === false){
        var width = $(window).width();
        var height = $(window).height();
        for(var i = 0; i < 1000; i++){
            const randomLeft = Math.floor(Math.random() * (width - 200))-1;
            const randomHeight = Math.floor(Math.random() * (height - 200))-1;
            $("#div3").animate({left: '+='+randomLeft}, 500).animate({top: '+='+randomHeight}, 500);                            
            $("#div3").click(function() {
                clickTracker = true;
                break;
            });         
        }
    }
    else{
        clickTracker = false;
    }
});

Answer 1

 var clickTracker = false; $("#div3").click(function() { if (clickTracker === false) { clickTracker = true; var width = $(window).width(); var height = $(window).height(); for (var i = 0; i < 10; i++) { const randomLeft = Math.floor(Math.random() * ((width - currentPos.left) - 200)) - 1; const randomHeight = Math.floor(Math.random() * ((height - currentPos.top) - 200)) - 1; console.log("putting stuff in animation queue"); $("#div3").animate({ left: '+=' + randomLeft }, 5000).animate({ top: '+=' + randomHeight }, 5000); } } else { clickTracker = false; $("#div3").stop(true); } }); 

 #div3 { width: 100px; height: 100px; background: black; position: absolute; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="div3"></div> 

I understand why your first thought was to call the click function within the for-loop , but if you had looked in your console after clicking on it a second time, you would have seen that you were using break the wrong way -- by calling a new function you are changing the scope, and that break statement was trying to break out of the function (which you can't do, you would have to use a return for that) and not the loop. It's also not a good idea to have two handlers for the same event. That's the kind of thing that tends to confuse computers. :)

It also might be worth pointing out that the for loop might not be working the way you think it is. What it's actually doing (you can see this if you look at the console for the snippet) is populating an animation queue for the div. That loop runs ten times (I changed it to ten for the sake of my sanity), generates a random number, and then puts that onto a list of places for the div to go, all in a matter of milliseconds. You can think of it like: $("#div3").animate().animate().animate() ... etc But the important thing to note here is that you are never clicking that div before the for loop ends.

Read up on stop() here .