CODEWITHSUNDEEP
javascriptjquery
Thuat Nguyen
Thuat Nguyen

Reputation: 272

Button onclick make other script stop running

i am having below code:

$(function() {
    $("#buttonID").click( function() {
        // stop funcName() running
    });
});

$(function funcName(){
    // some scripts will run on page load
});

My question is how can i stop funcName() running when click at #buttonID.

Thank you guys.

EDIT: This is the script that will run on page load: https://jsfiddle.net/1t8z3Ls2/1/ (i found this script on Google. this script will make a div child become sticky to it's parent div.)

I want to make this script stop runnig by clicking on a button.

Thanks again.

Upvotes: 3

Views: 2043

Answers (3)

Hamza Dahmoun
Hamza Dahmoun

Reputation: 1294

In the following code:
- You have one red div
- You have one button
- In the CSS you have one animation declared but not used
- When page is loaded, the first JS block code will be automatically executed, this block of code will assign animation 'moveRight' to div 'player'
- The animation will make the player div move to the right for one second
- If user click on the button 'Stop Animation', the function stopMoving() will be executed to stop the player div from moving
Good luck!

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <style>
    #player {
      min-width: 80px;
      min-height: 80px;
      background-color: red;
      position: absolute;
      top: 10%;
      left: 0%;
    }
    
    @keyframes moveRight {
      0% {
        top: 10%;
        left: 0%;
      }
      20% {
        top: 10%;
        left: 20%;
      }
      40% {
        top: 10%;
        left: 40%;
      }
      60% {
        top: 10%;
        left: 60%;
      }
      80% {
        top: 10%;
        left: 80%;
      }
      100% {
        top: 10%;
        left: 100%;
      }
    }
  </style>
  <button onclick="stopMoving()">Stop Animation</button>
  <div id="player"></div>

  <script>
    //This code will be executed on page load.
    //It will give the div 'player' an animation to make it move to the right
    let player = document.getElementById("player");
    player.style.animationName = "moveRight";
    player.style.animationDuration = "60s";
    player.style.animationFillMode = "forwards";



    function stopMoving() {
      //This function will be executed when user click on the button.
      //This function will stop the div from moving to the right                
      player.style.animationName = "";
    }
  </script>
</body>

</html>

Upvotes: 1

rez shahr
rez shahr

Reputation: 49

Events are executed right after the execution stack is empty. so you can't expect to be able to terminate a function that is already in execution stack by a click event. what you can do is to forth your funcName() to be executed in event loop. for example you can invoke your function as a callback function for requestAnimationFrame:

 docClick = document.getElementById("buttonID").addEventListener("click",function(){
 state=false;   
});

document.body.onload= function(){
    state = true;
    animationGame = requestAnimationFrame(Myfunc);
    function Myfunc(){
        if (state){
        console.log("hi");
        animationGame = requestAnimationFrame(Myfunc);  
        }   
    }
}

Upvotes: 0

Lugarini
Lugarini

Reputation: 802

JavaScript is normally single threaded - meaning that while a function is executed in the browser no other code can run at the same time - including event handlers such as onclick (they will be triggered only after the function is complete). So, in this case you cannot interrupt the execution of a function from code.

There are two workounds:

The long running function could take breaks intentionally, allowing other code to execute.

//set this to true from an event handler to stop the execution
var cancelled = false;

function longRunningFunction() {
  if (cancelled) {
    return;
  } 

  // do some work, but not all
  // save your progress to be able to resume when called again

  if (!done) {
    // release control, so that handlers can be called, and continue in 10ms
    setTimeout(longRunningFunction, 10);
  }
}

Use web workers. They allow running code in parallel, but have some restrictions and are not supported by all browsers.

Upvotes: 0

Related Questions