Question

<script src = "http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
    $(document).ready(function(){
        $("#pad").mousedown(function(){
            $(this).css("background-color", "lightgrey");   
            var timer = 1;
            var up_timer = setInterval(function(){
                timer = timer + 1;
                $("#pad").html(timer);
            },1);
        }).mouseup(function(){

            $(this).css("background-color", "grey");
            clearInterval(up_timer);

        });
    });
</script>
<div style = "height:500px;width:600px;background-color:grey;border-radius:4px;margin:0 auto;margin-top:10%;" id = "pad"></div>
<input type = "button" id = "done" value = "done">

您好，我的代码非常简单。有一个灰色的大盒子，当你按住它时，它变得光滑。当你按住时，框中会出现一个数字并且增长很快。我希望鼠标停止时数字停止增加，但由于某种原因，数字会继续增加，但框的颜色会恢复为灰色。

这里是jsfiddle：http://jsfiddle.net/Bag47/1/

谢谢！

Answer 1

up_timer与var一起宣布。它在内部声明的函数之外不存在。

从var移除var up_timer = setInterval并在更广泛的范围内声明：

$(document).ready(function(){
    var up_timer;
    $("#pad").mousedown(function(){

Answer 2

JavaScript变量的作用域是定义它们的函数，这意味着up_timer是传递给mousedown的函数的本地函数，不能在它之外访问。

在父函数中声明变量使其在整个过程中可用：

$(document).ready(function() {
    var up_timer;
    $("#pad").mousedown(function() {
        $(this).css("background-color", "lightgrey");   
        var timer = 1;
        up_timer = setInterval(function() {
            timer = timer + 1;
            $("#pad").html(timer);
        }, 1);
    }).mouseup(function() {
        $(this).css("background-color", "grey");
        clearInterval(up_timer);
    });
});

Answer 3

up_time变量不在您mouseup处理程序的范围内。您需要在范围内向外移动它，以便它仍然可以在mouseup处理程序中使用。

这里的新小提琴http://jsfiddle.net/Bag47/2/

重要的变化就是这个，我模式up_time向上。

$(document).ready(function(){
    var up_timer;

为什么clearInterval不能用于我的代码？

3 个答案: