Нажатие кнопки приводит к остановке работы другого скрипта - PullRequest
Новая
       1

Нажатие кнопки приводит к остановке работы другого скрипта

1 голос
/ 07 октября 2019

У меня нижеуказанный код: 

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

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

Мой вопрос: как я могу остановить запуск funcName () при нажатии на # buttonID.

Спасибо, ребята.

РЕДАКТИРОВАТЬ: Это сценарий, который будет работать при загрузке страницы: https://jsfiddle.net/1t8z3Ls2/1/ (я нашел этот сценарий в Google. Этот сценарий сделает дочерний элемент div привязанным к родительскому элементу div.)

Iхочу, чтобы этот скрипт прекратил выполнение, нажав кнопку.

Еще раз спасибо.

Ответы [ 3 ]

0 голосов
/ 07 октября 2019

События выполняются сразу после того, как стек выполнения пуст. так что вы не можете ожидать, что сможете завершить функцию, которая уже находится в стеке выполнения, событием click. то, что вы можете сделать, это отправить funcName () в цикл обработки событий. например, вы можете вызвать вашу функцию как функцию обратного вызова для 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);  
        }   
    }
}
0 голосов
/ 07 октября 2019

В следующем коде:- У тебя есть один красный div- У тебя есть одна кнопка- В CSS у вас есть одна анимация, объявленная, но не использованная- Когда страница загружена, первый код блока JS будет выполнен автоматически, этот блок кода назначит анимацию 'moveRight' для div 'player'- Анимация заставит игрока перемещаться вправо на одну секунду. - Если пользователь нажмет кнопку «Остановить анимацию», будет запущена функция stopMoving (), чтобы остановить перемещение игрока divУдачи! 

<!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>
0 голосов
/ 07 октября 2019

JavaScript обычно является однопоточным - это означает, что пока функция выполняется в браузере, никакой другой код не может выполняться одновременно - включая обработчики событий, такие как onclick (они будут запускаться только после завершения функции). Таким образом, в этом случае вы не можете прервать выполнение функции из кода.

Есть два обходных пути:

Длительная функция может намеренно делать перерывы, позволяя выполнять другой код. 

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

Использование веб-работников . Они позволяют выполнять код параллельно, но имеют некоторые ограничения и поддерживаются не всеми браузерами.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...