슬라이더 기능 만들기

Question

나는 회전 목마를 만들고있다. (나는 거기에 플러그인이 있지만 내 자신을 만들고 싶다). 코드를 다시 실행하려면 true 또는 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; 
}); 

}

및이 같은 그것을 호출 시도 : : 그래서 같은 함수로 배치 TRID 한

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

: 지금까지 반복되는 코드가

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

내가 그 함수를 호출 할 때마다 나는 틀린 값을 반환하는 것이 좋습니다. 내가 무엇을 놓치고 있는지 확실하지 않다.

이 지금까지 내 모든 코드 :

$(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) { $ ('# 상자 UL은'() { '왼쪽'애니메이션 :. left_indent}을 500 함수() {

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

    var active = false; 
}); 

}

어떤 조언을 잘 될 것입니다. 사전에 덕분에.

Answer 1

같은 범위에 포함되지 있었다. 이것에 대한 활성 같은 세마포어를 사용하는 exampe 작업 http://jsfiddle.net/AvzvJ/7/

그러나 그 나쁜 스타일을 참조하십시오.

이

Answer 2

정말 유용한 콜백 함수를 반환 할 수 없습니다. 콜백 변경하기 전에 외부 함수를 활성 상태로 반환합니다. 또한 재정의/rescoped 활성있는 '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 3

그냥 가지고, 외부 범위 또는 글로벌 한 변수를 수정하려면 당신은 당신의 함수 내에서 마지막 코드 줄에서 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! 
}); 

참고 : ...이 작업을 수행하지 마십시오. 당신이 이것을 할 수 있다는 사실 - 바깥 쪽 범위의 변수를 수정하는 것, 단지 값을 액세스하는 것뿐만 아니라 자바 스크립트에 대해 "나쁜 것"- 파이썬과 같은 "정돈 된"언어에서는 이것을 할 수 없다! LiveScript과 같은 일부 자바 스크립트 "바꾸기"는 실제로 불가능하기 때문에 (실제로는 특별한 구문을 사용해야합니다.) 불행하게도 더 인기있는 CoffeeScript는 다음과 같습니다 :(좋은 자바 스크립트 책을 선택하고 계속 진행하면 잘 구성된 코드를 작성하는 법을 배웁니다. 더 복잡한 아무것도. 활성