我正在尝试破坏 JavaScript 函数答案

【问题标题】：I am trying to break an JavaScript function我正在尝试破坏 JavaScript 函数
【发布时间】：2014-01-21 20:21:21
【问题描述】：

我编写了一个小脚本来制作一个小动画，但是当我在 div 上快速移动光标 10 次时，div 移动了 10 次。我做了一个全局变量和一个 if 查询，但它不起作用。

代码：

var working = false;
$(document).ready(function () {
    $("#div1").attr("style", "position:absolute;top:0px;left:0px;");
    $("#div2").attr("style", "position:absolute;top:0px;right:0px;");
    $("#div3").attr("style", "position:absolute;bottom:0px;left:0px;");
    $("#div4").attr("style", "position:absolute;bottom:0px;right:0px;");
});

function animon(id) {
    if (working == true) return false;
    var working = true;
    if (id == "1") $("#div1").animate({
        position: 'absolute',
        top: '0px',
        left: '60px'
    }, "slow");
    if (id == "2") $("#div2").animate({
        position: 'absolute',
        top: '0px',
        right: '60px'
    }, "slow");
    if (id == "3") $("#div3").animate({
        position: 'absolute',
        bottom: '0px',
        left: '60px'
    }, "slow");
    if (id == "4") $("#div4").animate({
        position: 'absolute',
        bottom: '0px',
        right: '60px'
    }, "slow");
}

function animoff(id) {
    if (id == "1") $("#div1").animate({
        position: 'absolute',
        top: '0px',
        left: '0px'
    }, "slow");
    if (id == "2") $("#div2").animate({
        position: 'absolute',
        top: '0px',
        right: '0px'
    }, "slow");
    if (id == "3") $("#div3").animate({
        position: 'absolute',
        bottom: '0px',
        left: '0px'
    }, "slow");
    if (id == "4") $("#div4").animate({
        position: 'absolute',
        bottom: '0px',
        right: '0px'
    }, "slow");
    var working = false;
}

animon() 函数绑定在 onmouseover 事件，而 animoff() 函数绑定到 onmouseout 事件。工作布尔值会检查是否移动了 div 容器。

【问题讨论】：

你应该使用 .stop() 函数来停止之前的动画。
第 11 行的范围混淆：var working=true;

标签： javascript jquery

【解决方案1】：

你想使用.stop()。

$(document).ready(function(){
    $("#div1").attr("style", "position:absolute;top:0px;left:0px;");
    $("#div2").attr("style", "position:absolute;top:0px;right:0px;");
    $("#div3").attr("style", "position:absolute;bottom:0px;left:0px;");
    $("#div4").attr("style", "position:absolute;bottom:0px;right:0px;");
});
function animon(id){
    if(id=="1")
        $("#div1").stop(true).animate({position:'absolute',top:'0px',left:'60px'},"slow");
    if(id=="2")
        $("#div2").stop(true).animate({position:'absolute',top:'0px',right:'60px'},"slow");
    if(id=="3")
        $("#div3").stop(true).animate({position:'absolute',bottom:'0px',left:'60px'},"slow");
    if(id=="4")
        $("#div4").stop(true).animate({position:'absolute',bottom:'0px',right:'60px'},"slow");
}
function animoff(id){
    if(id=="1")
        $("#div1").stop(true).animate({position:'absolute',top:'0px',left:'0px'},"slow");
    if(id=="2")
        $("#div2").stop(true).animate({position:'absolute',top:'0px',right:'0px'},"slow");
    if(id=="3")
        $("#div3").stop(true).animate({position:'absolute',bottom:'0px',left:'0px'},"slow");
    if(id=="4")
        $("#div4").stop(true).animate({position:'absolute',bottom:'0px',right:'0px'},"slow");
}

【讨论】：