setTimeout 함수를 피하기위한 리 팩터

Question

항목을 마우스로 가리키면 첨부 된 항목 주위에 테두리를 넣을 이벤트 처리기를 첨부하고 싶습니다. 가능한 경우 setTimeout() 함수를 사용하지 않으려합니다. 누구든지 아이디어가 있습니까? 이런 식으로 처리 할 수있는 유용한 프레임 워크로 안내해 준 명성.

아래 코드는 아래에서 수행하는 유일한 방법입니다. 이유는 내가 엘리먼트 내부의 html을 잡아서 db 값에서 대체하기 때문입니다. 여기 내 코드는 다음과 같습니다.

var color; 
$(document).ready(function(){ 

    attachMouseEnter(); 
    // This is not resetting. How do I make it so I can reset this? 
    function attachMouseEnter(){ 
     $('.editable').mouseenter(function(){ 
      console.log($(this)); 
      $(this).wrap('<span class="test"></span>') 
      $(this).css('border', '1px solid red'); 
     }); 
     window.setTimeout(attachMouseOut(), 1000); 
    } 
    // this is making it so I cannot grab the element and attach a handler to it. 
    function attachMouseOut(){ 
     $('.editable').mouseout(function(){ 
      var orginal = $(this); 
      $(this).css("border", "0px"); 
      $(this).parent().replaceWith(orginal.parent().html()); 
      window.setTimeout(attachMouseEnter(), 1000); 
     }); 
    } 
}); 

Answer 1

이벤트 핸들러를 계속해서 호출 할 필요가 없습니다. 한 번만 호출하면 충분합니다.