jQuery/JavaScript 실행 순서

Question

사용자가 jQuery를 사용하여 필터링 할 수있게하려는 몇 가지 항목이 있습니다. 사용자가 필터 기준을 선택하고 제출을 누르면 내 데이터베이스에 전화가 걸립니다.

function clearGrid() { 
    var theseDivs = $('.grid-item'); 
    $('.grid-item').fadeOut('fast', function() { 
    $(theseDivs).remove();  
    }); 
} 

을하고 난 다음 함수 내 새로운 데이터를 첨부 :이 호출이 완료되면,이 기능을 갖는 기존의 컨테이너를 페이드 아웃

function repopulate() { 
    <% @stuff.each do |gb| %> 
    $('#grid').append('<%= escape_javascript(render "/stuff", :gb => gb) %>'); 
    <% end %> 
    resizeGrid(); 
} 

resizeGrid() 함수는 어떤 절대 위치 결정을 수행 그리드의 다른 요소를 기반으로합니다. 다른 요소가 clearGrid()로 제거되기 전에 repopulate()가 호출되어 새로운 요소의 위치가 해제되고 이전 요소가 여전히있는 것처럼 렌더링됩니다.

다른 요소가 잘 빠져 나올 때까지 내 repopulate() 함수가 호출되지 않도록하는 방법이 있습니까?

Answer 1

으로 다시 채울 방법을 감속 한 다음 해당 콜백으로 그것을 repopulate을 전달하려고합니다. 이처럼 보이도록 clearGrid() 변경 :

function clearGrid(callback) { 
    var theseDivs = $('.grid-item'); 
    theseDivs.fadeOut('fast', function() { 
     theseDivs.remove(); 
     if(callback) { 
      callback(); 
     } 
    }); 
} 

그리고를 다음과 같이 두 모습 호출하는 현재의 코드를 가정 :

clearGrid(repopulate); 

:이처럼 보이도록 변경할 수 있습니다

clearGrid(); 
repopulate(); 

을

참고 : repopulate은 ()이 아니며 참조를 전달하고 호출하지 않으려 고하기 때문에 사용하지 않아야합니다.

두 번째 메모 : 또한 clearGrid()을 변경하여 jQuery를 다시 호출하는 대신 theseDivs으로 다시 변경했습니다. 이 방법을 사용하면 약간의 차이가있을 수 있습니다.

작업하는 태그가 <div> 일 뿐이라는 것을 알고 계시면 선택기를 $('div.grid-item')으로 바꿀 수 있습니다.

Answer 2

당신이이 완료있어 일단 clearGrid() 함수는 콜백을 호출 할 수 있도록해야

setTimeout(function(){ repopulate(); }, 50);