DOM에 setTimeout 및 객체 추가하기

Question

기본 정보가 포함 된 일부 행이있는 페이지가 있습니다. 사용자는 ajax 호출이 필요한 추가 정보를 표시 할 행을 클릭 할 수 있습니다. 내가 반환하는 정보의 양에 따라이 아약스 호출은 1-2 초가 걸릴 수 있습니다. 이 시간 동안 정보를로드 중임을 사용자에게 알리기 위해 '로드 중'이라는 텍스트를 추가하고 싶습니다. 그래서 내가 아약스 전화를하기 전에 텍스트 '로드 중'으로 스팬을 추가하고 성공하면 제거합니다. 그러나 아약스가 2 ~ 2 초 걸릴 수 있지만 모든 것이 빠르면 '로드 중'이 표시되지 않습니다. 중단 점에서 멈 추면로드 텍스트를 볼 수 있습니다. 그래서 setTimeout을 0ms 대기 시간으로 사용하기로 결정했습니다. 브라우저가 내 '로드 중'을 렌더링하기에 충분할만큼 길었습니다. 여기

$(document).ready(function() { 
    var item; 
    $('.my-row').click(function() { 
    item = $(this).val(); 
    $(this).children().append('<span id="loading">Loading..</span>'); 
    setTimeout(function() 
    { 
     getMyInformation(item, $(this).next().children()); 
    }, 0); 
    }); 
}); 

function getMyInformation(item, appendTo) { 
    $.ajax({ 
    url: myUrl, 
    async: false, 
    type: "POST", 
    data: { Id: item.id, Name: item.name }, 
    success: function (json) { 
     $('#loading').remove(); 
     appendItems(json.items, appendTo); 
    } 
    }); 
} 

function appendItems(items) { 
    $(items).each(function(i, item) { 
    appendTo.append('<div>item.info</div>'); 
    }); 
} 

내 문제입니다 : 여기

몇 가지 예제 코드입니다 내 '로드'표시 할 수있는 기회를 가지고 있지 않기 때문에의 setTimeout없이 페이지가 약간 랙이 보일 수 있지만, 내 정보는 않습니다 ajax 호출 후 표시합니다. setTimeout을 사용하면 내 'Loading'이 나타나고 'items'중 아무 것도 추가되지 않는 것을 제외하고는 예상대로 모든 것이 발생합니다. 중단 점을 설정하고 전달하는 모든 항목에 대해 appendTo.append('<div>item.info</div>');을 실행하는 것을 볼 수는 있지만 브라우저 나 DOM에는 표시되지 않습니다. 아무도 무슨 일이 일어나고 있는지 알고 있습니까? this 당신의 setTimeout의 내부가 더 이상 같은 맥락이다

Answer 1

때문에 - 손 전에 변수를 설정하지 :

var elements = $(this).next().children(); 
setTimeout(function() 
{ 
    getMyInformation(item, elements); 
}, 0);