Ajax 요청이 너무 빠르면 jQuery 애니메이션이 제대로 작동하지 않습니다.

Question

약간 둘러 보았지만 아직 답변을 찾지 못했습니다.

버튼을 클릭하면 정보가 서버로 전송되고 현재 div가 숨겨지고로드되는 gif가로드된다는 Ajax 요청이 있습니다. 서버가 응답 할 때 GIF를 없애고 서버의 내용을 표시하도록 설정했습니다.

코드 :

$("#submit").click(function(e){ 
    e.preventDefault(); 
    var $domain = $.fn.HTTP($('#domain').val()); 
    if(!$.fn.ValidURL($domain)){ 
     $('#domainerror').fadeIn(500); 
     return false; 
    } 

    if($('#domainerror').css('display')!=='none'){ 
     $('#domainerror').fadeOut(350); 
    } 

    $('#question').hide(500, function(){ 
     $('#waiting').show(350); 
    }); 

    $.getJSON('http://localhost/file.php', 
    { 
     i: $domain 
    }, 
     function(data){ 
     $('#answer').html(data.message + $('#trybutton').html()); 
     $('#waiting').hide(350, function(){ 
      $('#answer').show(350); 
     }); 
    }); 
}); 

문제는 jQuery를 서버 너무 빨리 사라지지 않는 로딩 GIF에서 응답을 수신합니다.

그러나 서버에 3 초 동안 대기하면 제대로 작동합니다. 이것은 내가 원하는 해결책이 아닙니다.

아이디어가 있으십니까?

Answer 1

너무 빠르기 때문에 사용자가 애니메이션을로드하지 않아도되는 것은 좋은 일입니다.

어쨌든, 문제는 애니메이션이 적어도 500ms 걸리는 것입니다. 애니메이션은 AJAX 요청과 동시에 비동기 적으로 처리됩니다. 서버를 잠자기 상태로 만드는 대신 CPU가 낭비되는 대신 AJAX 요청을 보내기 전에 브라우저를 대기 상태로 두십시오.

가 setTimeout() 함수의 호출을 넣어,이 예제는 3 초를 기다려야 할 것입니다 :

setTimeout(function() { 
    $.getJSON('http://localhost/file.php', 
    { 
     i: $domain 
    }, 
    function(data){ 
     $('#answer').html(data.message + $('#trybutton').html()); 
     $('#waiting').hide(350, function(){ 
      $('#answer').show(350); 
     }); 
    }); 
}, 3000); 

이상적인 솔루션 그러나 애니메이션 효과를 사용하고 단지 쇼()와 숨기기를 사용하지하는 것입니다().

Answer 2

대기 애니메이션을 표시하는 데 지연 시간을 없애므로 요청이 반환 될 때 여전히 표시되지 않습니다.

$('#question').hide() //was 500 
$('#waiting').show(); //was 350 

모두 추가하면 거의 1 초 후입니다. 그때까지는 아약스 요청이 대부분의 시스템에서 반환되었을 수 있으므로 그 시점까지는 여전히 애니메이션을 적용 할 가치가 없습니다.

Answer 3

질문 숨기기가 끝나기 전에 ajax 콜백이 실행되고 $('#waiting').show(350);은 $('#waiting').hide(350, ...) 뒤에옵니다. 당신이 이 가 immidiately가 (페이드 아웃 할 수있는 질문을 기다리고되지 않음), 이런 일이되지 않습니다 #waiting IMG을 보여했다면

; 당신은 해결하기 위해 세 가지 가능성이 있습니다 그 대답은 또한 숨기기를 기다리는 것을 기다리지 않아야합니다.당신이 원하는 경우

var answered = false, 
    waiting = false; 
$('#question').hide(500, function(){ 
    if (!answered) { 
     waiting = true; 
     $('#waiting').show(350); 
    } 
}); 

$.getJSON('http://localhost/file.php', { 
    i: $domain 
}, function(data){ 
    $('#answer').html(data.message + $('#trybutton').html()); 
    answered = true; 
    if (waiting) { 
     $('#waiting').stop().hide(350, function(){ 
      $('#answer').show(350); 
     }); 
    } else { 
     $('#answer').show(350); 
    } 
}); 

---

:

---

은 또는 당신은 어떤 애니메이션을 을 대답은 이미 질문 페이드 아웃 때 페이드되었음을 나타냅니다없고, 보여 변수를 사용 에 대한 네 개의 애니메이션은 항상과 을 연속적으로 (최소 1550ms) 표시하므로 수동으로 코딩해야합니다 (

).

var showanswer = false; 
$('#question').hide(500, function() { 
    $('#waiting').show(350, function() { 
     if (showanswer) // already loaded 
      showanswer(); // execute callback 
     else 
      showanswer = true; // mark as shown 
    }); 
}); 

$.getJSON('http://localhost/file.php', { 
    i: $domain 
}, function(data){ 
    $('#answer').html(data.message + $('#trybutton').html()); 
    function animate() { 
     $('#waiting').hide(350, function(){ 
      $('#answer').show(350); 
     }); 
    } 
    if (showanswer) // waiting image shown 
     animate(); 
    else 
     showanswer = animate; // set as callback 
}); 

Answer 4

자바 스크립트의 setTimeout을 사용하십시오. 코드는 다음과 같이 (아마도 정확히) 보일 수 있습니다 :

setTimeout("getResponse()", 3000); 

function getResponse() { 
    $.getJSON('http://localhost/file.php', 
    { 
     i: $domain 
    }, 
     function(data){ 
     $('#answer').html(data.message + $('#trybutton').html()); 
     $('#waiting').hide(350, function(){ 
      $('#answer').show(350); 
     }); 
    }); 
} 

여전히 file.php의 코드를 처리하고 데이터를 다시 전송 서버로 i 변수를 전송하여 AJAX 요청을 가지고 그런 식으로하는 당신을 다룰수있다. 유일한 트릭은 함수에 넣는 것입니다 (필수는 아니지만 setTimeout 함수를 더 예쁘게 보이게 만듭니다). 3000 밀리 초 후에 호출하십시오.