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 /文本）时，都会触发一个新的插入事件，这就是您的计时器不起作用的原因。

如果您真的需要“等待”，正如您在评论中所描述的那样，您可以使用mutationobserver“替换”DOMNodeInserted逻辑。我把一个小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/

将元素传递给jQuery函数

2 个答案: