jQuery를 지연과의 keyup

Question

HI들,

난 할 노력하고있어하는 사람의 keyup로하고 입력을 완료하면 텍스트 필드에 텍스트를 입력하는 동안 애니메이션 GIF를 표시하는 것입니다, 지프가 사라 'Saved'메시지를 몇 초 동안 표시하면 사라집니다. 내가 지금까지했던 어떤

은 다음과 같습니다

if ($('.gallery_items li input').length > 0) { 
    $('.gallery_items li input').keyup(function() {   
     var li = $(this).parent(); 
     li.children('.gallery_saving').removeClass('dn'); 
     var identity = li.attr('id').split('_'); 
     var v = $(this).val(); 
     var url = '/caption/id/' + identity[1]; 
     $.post(url, { caption : v }); 
     $.delay(500).li.children('.gallery_saving').delay(500).html('Saved...').delay(500).addClass('dn');   
     return false; 
    }); 
} 

경우 클래스의 gallery_saving '배경 이미지와 클래스'DN '로 지정 애니메이션 GIF는 단순히 CSS를 가지고있다'표시 : 없음 '. 처음에는 'gallery_saving'클래스도 'dn'클래스를 가지고 있으므로 표시되지 않습니다. 'dn'클래스가 타이핑을 시작하면 로더가 표시됩니다.

당신은 분명히 문제와 이미 참조 :

$.delay(500).li.children('.gallery_saving').delay(500).html('Saved...').delay(500).addClass('dn'); 

내가 잘못 알고 있지만, 작업을 수행하는 방법을 알아낼 수 없습니다 - 누군가가 도와 드릴까요?

Answer 1

당신은 ..

url = "/echo/html"; 
v = "test"; 
$.ajax({ 
    url: url, 
    type: 'POST', 
    data: ({ caption: v}), 
    success: function(){ 
    $('.gallery_saving').html('Saved...').delay(1000).fadeToggle("slow"); 
    }, 
    error: function() { 
    $('.gallery_saving').html('Error...').delay(1000).fadeToggle("slow"); 
    } 
}); 

예와 같은

뭔가 지연 시간에없는 로더를 제거 할 수 있지만 입력 한 데이터의 성공적인 안전에한다 : 자세한 내용은 http://fiddle.jshell.net/gabel/udvbx/

읽기 http://api.jquery.com/jQuery.ajax/을 ..

Answer 2

다음과 같이 많은 수의 아약스 호출을 작성하게되므로이 작업을 시도하고 수행하는 것이 좋습니다. 사용자는 실제로 입력을 완료하지 않았습니다. 사용자가 입력 속도가 느린 경우 아무 이유없이 많은 시간 동안 데이터를 저장하게됩니다.

dn 클래스 대신 show() 및 hide()을 사용할 수도 있습니다. 또는 사용 toggleClass()