0

我正在创建一个轮播（我知道那里有插件，但我想创建自己的）。我正在努力将这段代码放在一个函数中，因为我必须返回一个真值或假值才能让代码再次运行。到目前为止，我有这个重复的代码：

if(!active) {
        active = true;
        $('#box ul').animate({ 'left': left_indent }, 500, function () {
            $('#box li:last').after($('#box li:first'));
            $('#box ul').css({ 'left': left_value });
            active = false;
        });
    }

我已经尝试将它放入这样的函数中：

function slider(left_indent, left_value) {
$('#box ul').animate({'left' : left_indent}, 500,function(){   

    $('#box li:first').before($('#box li:last'));          
    $('#box ul').css({'left' : left_value});

    var active = false;
});

}

我试过这样称呼它：

if(!active) {
        active = true;
        slider(left_indent, left_value);
    }

每次我调用该函数时，我似乎都无法主动返回 false。我不确定我错过了什么。

到目前为止，这是我的所有代码：

$(function () {
var item_width = $("#box li img").outerWidth();
var left_value = item_width * (-1);

$('#box li:first').before($('#box li:last'));
$('#box ul').css({ 'left': left_value });

var active = false;
$("#next").click(function () {
    var left_indent = parseInt($('#box ul').css('left')) - item_width;

    if(!active) {
        active = true;
        $('#box ul').animate({ 'left': left_indent }, 500, function () {
            $('#box li:last').after($('#box li:first'));
            $('#box ul').css({ 'left': left_value });
            active = false;
        });
    }
    return false;
});

$("#back").click(function () {
    var left_indent = parseInt($('#box ul').css('left')) + item_width;

    if(!active) {
        active = true;
        slider(left_indent, left_value);
    }
    return false;
});

});

函数滑块（left_indent，left_value）{ $（'#box ul'）.animate（{'left'：left_indent}，500，function（）{ 

    $('#box li:first').before($('#box li:last'));          
    $('#box ul').css({'left' : left_value});

    var active = false;
});

}

任何建议都会很棒。提前致谢

4

3 回答 3

0

您不能真正以有用的方式从这样的回调中返回函数。因为外部函数会在回调改变它之前返回活动状态。此外，您使用 'var' 重新定义/重新定义了活动范围，因此无论如何您都不会更改外部活动。您需要的是在共享范围中处于活动状态并在单击处理程序中进行测试。

就像是：

var active = false;

//assumes left_indent, left_value defined further up
$('#slideRightBtn').click(function(){
    if(!active){ slider(left_indent,left_value)); }
});

function slider(left_indent, left_value) {

    //Don't use 'var' for active here
    //that sets a new var 'active' in the scope of this func

    active = true;
    $('#box ul').animate({'left' : left_indent}, 500,function(){   

        $('#box li:first').before($('#box li:last'));          
        $('#box ul').css({'left' : left_value});


        active = false;
    });
}
于 2012-07-07T16:19:05.983 回答
0

var如果要修改外部范围或全局变量中的变量，则可以从函数内的最后一行代码中删除，只需：

function slider(left_indent, left_value) {
$('#box ul').animate({'left' : left_indent}, 500,function(){   

    $('#box li:first').before($('#box li:last'));          
    $('#box ul').css({'left' : left_value});

    active = false; // Changed!
});

注意：...但请不要这样做。事实上，你可以做到这一点——在外部范围内修改一个变量，而不仅仅是访问它的值，这对 Javascript 来说是一个“坏事”——在像 Python 这样的“理智”语言中，你不能这样做！一些像LiveScript这样的Javascript“替代品”甚至使这成为不可能（实际上你必须为此使用特殊的语法），但不幸的是，更流行的 CoffeeScript 没有:( 选择一本好的 Javascript 书并学习编写结构良好的代码，如果你继续阅读任何更复杂的东西。

于 2012-07-07T16:25:50.490 回答
0

active 不在同一范围内。请参阅工作示例http://jsfiddle.net/AvzvJ/7/

但是，为此使用像 active 这样的信号量是不好的风格。

于 2012-07-07T16:27:34.247 回答