要素を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/