将元素传递给jQuery函数

我需要在计时器中更改html span元素的文本。 计时器工作得很好，但我没有成功地更改范围内容

问题在于：

$(element).text(hour);

我错过了什么

这是我的密码：

HTML:

00:00

这是我的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);
   });

已加载函数（选择器、回调）{
$（函数（）{
回调（$（选择器））；
});
$（文档）.on（'DOMNodeInserted'，选择器，函数（）{
回调（$（this））；
});
};
功能设置计时器（元素、持续时间、间隔）{
var start=Date.now（），
差异，
会议记录，
秒；
clearInterval（window.mytimer）；
函数计时器（）{
diff=持续时间-（（Date.now（）-start）/1000）| 0）；
分钟=（差异/60）| 0；
秒=（差异%60）| 0；
如果（分钟<0）{
分钟=0；
}
如果（秒<0）{
秒=0；
}
分钟=分钟<10？“0”+分钟：分钟；
秒=秒<10？“0”+秒：秒；
小时=分钟+“：”+秒；
$（元素）。文本（小时）；
if（window.mytimer！=null&diff<0）{
clearInterval（window.mytimer）；
}
};
定时器（）；
window.mytimer=setInterval（计时器，interval*1000）；
};
已加载（'#mytimer'，函数（el）{
设置计时器（el，100,1）；
});

删除插入DOM的部分，它会导致一次又一次地重新创建间隔，因为在执行``text（）`时，会插入一个元素

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

---

检查此提琴：

删除插入DOM的部分，它会导致一次又一次地重新创建间隔，因为在执行“`text（）”时，插入了一个元素

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

---

检查这把小提琴：

首先，这是对Kaddath的另一个回答，他是正确的，正如我在上面的评论中提到的，删除加载的方法（或至少部分）

为什么？

• 已弃用，并对 表演
• 无论何时更改此元素的内容（HTML/文本），都会触发一个新的插入事件，这就是计时器不工作的原因

如果您真的需要“等待”，如您在下面的评论中所述，您可以使用

mutationobserver

，它“替换”了

DOMNodeInserted

逻辑。我把一个小盒子放在一起

$（）.ready（函数（））{
功能设置计时器（元素、持续时间、间隔）{
var start=Date.now（），
差异，
会议记录，
秒；
clearInterval（window.mytimer）；
函数计时器（）{
diff=持续时间-（（Date.now（）-start）/1000）| 0）；
分钟=（差异/60）| 0；
秒=（差异%60）| 0；
如果（分钟<0）{
分钟=0；
}
如果（秒<0）{
秒=0；
}
分钟=分钟<10？“0”+分钟：分钟；
秒=秒<10？“0”+秒：秒；
小时=分钟+“：”+秒；
元素。文本（小时）；
if（window.mytimer！=null&diff<0）{
clearInterval（window.mytimer）；
}
};
定时器（）；
window.mytimer=setInterval（计时器，interval*1000）；
};
//只需在此处运行您的方法（如果存在DOM元素）
//setupTimer（$（'mytimer'），100,1）；
//如果你的元素不在那里，你可以
//请注意文档中是否有这样的更改。。。
var观察者=新的突变观察者（功能（突变）{
突变。forEach（功能（突变）{
var newNodes=mutation.addedNodes；//DOM节点列表
if（newNodes！==null）{//如果添加了新节点
var$nodes=$（newNodes）；//jQuery集
$nodes.each（函数（）{
var$node=$（这个）；
//寻找你的元素
if（$node.attr（'id'）='mytimer'）{
//行动起来
setupTimer（$（'mytimer'），100,1）；
//以防你不再需要它
observer.disconnect（）；
}
});
}
});    
});
//观察员的配置：
//在您的情况下，可能会减少这种情况
变量配置={
属性：正确，
儿童名单：是的，
characterData：true
};
//目标必须是现有的DOM节点
//根据你的需要调整这个。。。
var target=document.body；
//传入目标节点以及观察者选项
observer.observe（目标，配置）；
});

首先，这是对Kaddath的另一个回答，他是正确的，正如我在上面的评论中提到的，删除加载的方法（或至少是其中的一部分）

为什么？

• 已弃用，并对 表演
• 无论何时更改此元素的内容（HTML/文本），都会触发一个新的插入事件，这就是计时器不工作的原因

如果您真的需要“等待”，如您在下面的评论中所述，您可以使用

mutationobserver

，它“替换”了

DOMNodeInserted

逻辑。我把一个小盒子放在一起

$（）.ready（函数（））{
功能设置计时器（元素、持续时间、间隔）{
var start=Date.now（），
差异，
会议记录，
秒；
clearInterval（window.mytimer）；
函数计时器（）{
diff=持续时间-（（Date.now（）-start）/1000）| 0）；
分钟=（差异/60）| 0；
秒=（差异%60）| 0；
如果（分钟<0）{
分钟=0；
}
如果（秒<0）{
秒=0；
}
分钟=分钟<10？“0”+分钟：分钟；
秒=秒<10？“0”+秒：秒；
小时=分钟+“：”+秒；
元素.文本（h）
$().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);

});