jQuery 함수에 전달 요소

Question

타이머에서 html span 요소의 텍스트를 변경해야합니다. 타이머가 잘 작동하지만 스팬 내용을 변경하지 않아도됩니다. 내가 여기 실종 무엇

$(element).text(hour); 

:

문제에있다?

가

HTML은 : 여기

<span id="mytimer">00:00</span> 

내 JS이다

function loaded(selector, callback){ 
     $(function() { 
      callback($(selector)); 
     }); 
     $(document).on('DOMNodeInserted', selector, function() { 
      callback($(this)); 
     }); 
    }; 

    function setupTimer(element, duration, interval) { 
     var start = Date.now(), 
      diff, 
      minutes, 
      seconds; 
     clearInterval(window.mytimer); 
     function timer() { 
      diff = duration - (((Date.now() - start)/1000) | 0); 
      minutes = (diff/60) | 0; 
      seconds = (diff % 60) | 0; 
      if (minutes < 0) { 
       minutes = 0; 
      } 
      if (seconds < 0) { 
       seconds = 0; 
      } 
      minutes = minutes < 10 ? "0" + minutes : minutes; 
      seconds = seconds < 10 ? "0" + seconds : seconds; 
      hour=minutes + ":" + seconds; 
      $(element).text(hour); 
      if (window.mytimer != null & diff < 0) { 
       clearInterval(window.mytimer); 
      } 
     }; 
     timer(); 
     window.mytimer = setInterval(timer, interval * 1000); 
    }; 

    loaded('#mytimer', function(el){ 
      setupTimer(el,100,1); 
    }); 

Answer 1

먼저,이에 나는 위의 의견에 언급, 당신의로드 방법을 분리 Kaddath의 하나 추가 대답은, 그가 올 (또는 그것의 적어도 일부).

왜?

• DOMNodeInserted는 사용되지 않으며 성능에 부정적인 영향을 가지고 있습니다.
• 이 요소의 내용 (HTML/텍스트)을 변경할 때마다 삽입 된 새 이벤트가 트리거되므로 타이머가 작동하지 않는 것입니다.

당신이 당신의 코멘트 beow에 설명 된대로 정말 "대기"해야하는 경우, 당신은 DOMNodeInserted 논리를 "대체"mutationobserver를 사용할 수 있습니다. 나는 작은 example

$().ready(function() { 

    function setupTimer(element, duration, interval) { 
    var start = Date.now(), 
     diff, 
     minutes, 
     seconds; 
    clearInterval(window.mytimer); 
    function timer() { 
     diff = duration - (((Date.now() - start)/1000) | 0); 
     minutes = (diff/60) | 0; 
     seconds = (diff % 60) | 0; 
     if (minutes < 0) { 
      minutes = 0; 
     } 
     if (seconds < 0) { 
      seconds = 0; 
     } 
     minutes = minutes < 10 ? "0" + minutes : minutes; 
     seconds = seconds < 10 ? "0" + seconds : seconds; 
     hour=minutes + ":" + seconds; 
     element.text(hour); 
     if (window.mytimer != null & diff < 0) { 
      clearInterval(window.mytimer); 
     } 
    }; 
    timer(); 
    window.mytimer = setInterval(timer, interval * 1000); 
    }; 

    // simply run your method here (in case DOM element exists) 
    // setupTimer($('#mytimer'),100,1); 

    // in case your element is not there you can 
    // observe the document for changes like this... 
    var observer = new MutationObserver(function(mutations) { 
     mutations.forEach(function(mutation) { 
     var newNodes = mutation.addedNodes; // DOM NodeList 
     if(newNodes !== null) { // If there are new nodes added 
      var $nodes = $(newNodes); // jQuery set 
      $nodes.each(function() { 
       var $node = $(this); 
       // looking for your element 
       if($node.attr('id') === 'mytimer') { 
        // do your action 
        setupTimer($('#mytimer'),100,1); 
        // in case you do not need it any longer 
        observer.disconnect(); 
       } 
      }); 
     } 
     });  
    }); 

    // Configuration of the observer: 
    // might be possible to reduce this in your case 
    var config = { 
     attributes: true, 
     childList: true, 
     characterData: true 
    }; 

    // the target has to be an existing DOM node 
    // adapt this to your needs... 
    var target = document.body; 

    // Pass in the target node, as well as the observer options 
    observer.observe(target, config); 

}); 

Answer 2

삽입 한 DOM과 일부 제거가 재로 간격을 일으키는 여기

내 코드 왜냐하면 당신이``text()`를 할 때, 당신은 요소를 삽입하기 때문입니다.

function loaded(selector, callback){ 
    $(function() { 
     callback($(selector)); 
    }); 
    /*$(document).on('DOMNodeInserted', selector, function() { 
     callback($(this)); 
    });*/ 
}; 

확인이 바이올린 : https://jsfiddle.net/rzaeg38g/