Question

我需要做些什么来制作阻止其他功能继续运行的功能？具体来说，这里发生了什么;开始按钮启动动画以更改div的宽度。当我点击div时，如何阻止动画继续？

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    function start() {
        $("#block").animate({width:'0px'},2000);
    }
    function stop() {
        //How do I stop the start() function from continuing?
    }
</script>
<style>
    #block {
        height:150px;
        width:150px;
        background-color: blue;
    }
</style>
<div id="block" onclick="stop()></div>
<button onclick="start()">Start</button>

Answer 1

JavaScript是单线程的，一个函数无法阻止另一个函数，因为它们无法同时运行。

话虽如此，你的问题实际上是一个jQuery动画问题。只需使用the jQuery stop method告诉jQuery停止动画元素。

function stop() {
    $("#block").stop();
}

工作示例：

＆＃13;

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    function start() {
        $("#block").animate({width:'0px'},2000);
    }
    function stop() {
        $("#block").stop();
    }
</script>
<style>
    #block {
        height:150px;
        width:150px;
        background-color: blue;
    }
</style>
<div id="block" onclick="stop()"></div>
<button onclick="start()">Start</button>

＆＃13;

Answer 2

停止.animate而不是start功能。动画发生时start函数实际上并没有运行，它只是调用.animate jquery方法，这就是你要中断的。

http://api.jquery.com/stop/

Answer 3

使用停止功能

 function stop() {
            $("#block").stop();
}

Live Code

Answer 4

您可以使用JQuery stop（），其文档为here。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.min.js"></script>
<script>
    function start() {
        $("#block").animate({width:'0px'},2000);
    }
	function stop() {
	    $("#block").stop();
    }
</script>
<style>
    #block {
        height:150px;
        width:150px;
        background-color: blue;
    }
</style>
<div id="block" onclick="stop()"></div>
<button onclick="start()">Start</button>

如何阻止函数继续使用javascript？

4 个答案:

工作示例：