Question

我正在创建一个旋转木马（我知道那里有插件，但我想创建自己的插件）。我正在努力将这些代码放在函数中，因为我必须返回一个true或false值，以便代码再次运行。到目前为止，我已经重复了这段代码：

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

}

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

Answer 1

你无法以有用的方式从这样的回调中真正返回函数。由于外部函数在回调改变之前将返回活动状态。您还使用'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;
    });
}

Answer 2

如果要修改外部作用域中的变量或全局变量，只需从函数内的最后一个代码行中删除var，只需：{/ p>

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书并学习编写结构良好的代码，如果你继续前进到更复杂的事情。

Answer 3

活跃不在同一范围内。参见工作示例http://jsfiddle.net/AvzvJ/7/

然而，使用像活动信号量这样的信号量是不好的风格。

创建滑块功能

3 个答案: