logo标签列表

按钮onclick事件如何使其他脚本停止运行？

javascriptjquery
3

我有以下代码：

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

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

我的问题是如何在点击 #buttonID 后停止运行 funcName()。

谢谢大家。

编辑：这是将在页面加载时运行的脚本：https://jsfiddle.net/1t8z3Ls2/1/ （我在谷歌上找到了这个脚本。该脚本将使一个 div 子元素粘贴到其父 div 上。）

我希望通过单击按钮来停止运行此脚本。

再次感谢。

取决于它是什么... - epascarello
“停止 funcName() 运行” 是什么意思？如果它在页面加载时运行，那么它会在按钮被点击之前开始运行。脚本是否执行所有同步操作，还是存在异步操作？如果全部都是同步操作，那么在 funcName() 中间不会有任何代码运行，因此它将始终完成。如果存在异步操作，您可以在按钮单击时设置一个变量，然后在异步处理程序回调中检查该变量，以决定是否忽略它。 - IceMetalPunk
请提供更多细节，告诉我们您想要实现什么和迄今为止您尝试过哪些方法？ - nircraft
我在那个脚本中没有看到任何异步操作，尽管很难确定你想要在这个执行多项任务的大型脚本中停止哪些操作。你是想让粘性元素不再粘着吗？那么你需要删除该脚本设置的窗口滚动事件处理程序。虽然如果你只想要粘性元素，使用CSS的position: sticky属性会更容易，而不是使用你实际上不理解的脚本。 - IceMetalPunk
我能想到的最好的方法是让第二个 div 粘在页面上，并改变它的位置，使其更靠近右边缘。但是我无法移动它。 - Thuat Nguyen
显示剩余3条评论
3个回答
1
在以下代码中： - 你有一个红色的 div - 你有一个按钮 - 在 CSS 中，你声明了一个但未使用的动画 - 页面加载时，第一个 JS 代码块将自动执行，这个代码块将把动画 'moveRight' 分配给 div 'player' - 动画将使 player div 向右移动一秒钟 - 如果用户点击“停止动画”按钮，则会执行 stopMoving() 函数以停止 player 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

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

使用Web Workers。它们允许并行运行代码，但有一些限制，并非所有浏览器都支持。

谢谢您，先生。我不是很擅长JS。但我刚刚添加了我想要停止运行的脚本。您能否请看一下并为我的情况提供具体的解决方案。再次感谢您。 - Thuat Nguyen
0

事件在执行栈为空后立即执行。因此，您不能指望通过单击事件来终止已经在执行栈中的函数。您可以将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);  
        }   
    }
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接