2010-02-26 7 views
0

jQuery에 대한 특별 이벤트를 생성하려고합니다. 나는 사용자가 0.5 초를 멈출 때 작동 할 제어 지연을 만들고 싶다. 하지만 setTimeout을 사용할 수는 없습니다. jQuery 키 업 지연 이벤트

jQuery.event.special.keyupdelay = { 
    add : function(handler, data, namespaces) { 
     var delay = data && data.delay || 100; 

     return function(event) {             
      setTimeout(function() { handler.apply(this, arguments);}, data); 
     } 
    }, 

    setup: function(data, namespaces) { 
     jQuery(this).bind("keyup", jQuery.event.special.keyupdelay.handler); 
    }, 

    teardown: function(namespaces) { 
     jQuery(this).unbind("keyup", jQuery.event.special.keyupdelay.handler);   
    }, 

    handler: function(event) {    
     event.type = "keyupdelay"; 
     jQuery.event.handle.apply(this, arguments); 
    } 
}; 

$(".money").bind("keyupdelay", {delay: 1000}, function(event) { 
    alert('Delayed!'); 
}); 

에서는 setTimeout 작동하지 않는처럼 사용합니다.

나는이

var timer; 

$(".quantity input").keyup(function() { 
     var self = $(this); 

     if(timer) { 
      clearTimeout(timer); 
      timer = null; 
     } 
     timer = setTimeout(function() { 
      var qty = self.val(); 
      $(".qty").html(qty); 
     }, 300); 
}); 

처럼 할 수 있습니다하지만 지연 트리거 특별 이벤트를 만들려고합니다. 지연과 함께해야하는 많은 컨트롤이 있습니다.

+1

무엇이 문제입니까? –

+1

무엇이 setTimeout 사용을 방지합니까? 해결 방법이있을 수 있습니다. –

답변

1

시간 초과에서 "this"를 사용하고있는 것 같습니다. 지연 후 함수가 실행되면 "this"가 창 개체가됩니다.

jQuery.event.special.keyupdelay = { 
    add : function(handler, data, namespaces) { 
     var delay = data && data.delay || 100, 
      that = this; 

     return function(event) {             
      setTimeout(function() { handler.apply(that, arguments);}, data); 
     } 
    }, 

    setup: function(data, namespaces) { 
     jQuery(this).bind("keyup", jQuery.event.special.keyupdelay.handler); 
    }, 

    teardown: function(namespaces) { 
     jQuery(this).unbind("keyup", jQuery.event.special.keyupdelay.handler);   
    }, 

    handler: function(event) {    
     event.type = "keyupdelay"; 
     jQuery.event.handle.apply(this, arguments); 
    } 
};