【问题标题】:Run a anonymous function several times using javascript's setTimeout使用 javascript 的 setTimeout 多次运行匿名函数
【发布时间】:2011-12-14 04:06:34
【问题描述】:

我在网站上使用以下功能。原谅我正在使用的草率 jQuery,有没有办法多次运行这个函数而不将其声明为独立函数并且无需多次复制和粘贴代码?

展览 A:

setTimeout(function(){

    $('.nav > li > a').each(function(k,el){
        var width = $(this).parent().width();
        $(this).next('span').width(width);
    });

},1000);

我不想这样做:

setTimeout(function(){
        // same code here   
},1000);

setTimeout(function(){
        // same code here   
},3000);

setTimeout(function(){
        // same code here   
},5000);

我也不想这样做:

function myfunction{
    // same code here   
}

setTimeout('myFunction()',1000);
setTimeout('myFunction()',3000);
setTimeout('myFunction()',5000);

【问题讨论】:

  • 您是希望它在 setTimeout 结束时调用自己(基本上每 X 秒运行一次)还是只使用相同的函数对 setTimeout 进行 n 次不同调用?

标签: javascript settimeout


【解决方案1】:
for (var i = 1000; i <= 5000; i += 2000) {
    setTimeout(func, i);
}

var times = [1000, 3000, 5000];
for (var i=0; i<times.length; i++) {
    setTimeout(func, times[i]);
}

仅限较新的浏览器

[1000, 3000, 5000].forEach(function(time){
    setTimeout(func, time);
});

【讨论】:

  • 很好地使用原生 js 的映射
  • +1 我不知道 forEach。这是一个很好的,我会用它。我只是检查了 firefox 和工作,将检查所有主要浏览器,如果这是它们的一部分,这是你刚刚向我展示的易用性方面非常棒的东西。
  • IE8 不支持。难道你不知道 IE 将成为该组的假人。希望IE9可以。让我知道,因为我有一个 mac。谢谢。
【解决方案2】:

是的,使用setInterval 方法。

setInterval(function() {
    $('.nav > li > a').each(function(k,el){
      var width = $(this).parent().width();
      $(this).next('span').width(width);
    }); 
}, 2000);

//run every two seconds

或者,您可以反复调用 setTimeout...

myFun = function() {
    $('.nav > li > a').each(function(k,el){
      var width = $(this).parent().width();
      $(this).next('span').width(width);
    });
    setTimeout(myFun, 2000);
}

setTimeout(myFun,1000);

这应该与执行 1000,3000 等具有相同的效果...

【讨论】:

  • 我怎样才能让它在 10 秒后停止?
  • 如果使用setInterval,可以使用clearInterval。或者,如果你必须从 1,3 等开始计数,你可以有一个变量来表示你经过的时间,如果大于 10 秒,则不调用最终的 setTimeout。
【解决方案3】:

你可以使用$.map

$.map([1000,3000,5000], function(time,index){ 

 setTimeout(function(){
        $('.nav > li > a').each(function(k,el){
        var width = $(this).parent().width();
        $(this).next('span').width(width);
    });
 },time);

}); 

【讨论】:

  • 实际上它不是很有效。映射循环有效,但只设置了一个 setTimeout。
  • 应该,我之前把时间和索引值弄混了。
【解决方案4】:
(function(){
    var i, weirdProblem = function(timeout) {
        setTimeout(function() {
            $('.nav > li > a').each(function(){
                var width = $(this).parent().width();
                $(this).next('span').width(width);
            });
        },timeout);
    };
    for(i = 1; i <= 5; i+=2) {
        weirdProblem(i*1000);
    }
})();

闭包封装了声明,一旦不再使用就会被垃圾回收。虽然不确定这一点。很奇怪。

【讨论】:

  • 看起来不错。 +1。在使用 typekit 渲染导航字体后,我正在调整导航菜单项的大小 - 因此需要超时,如果用户连接速度较慢,则需要多次;)
  • 谷歌字体更好用,相信我。没有刷新发生。我讨厌 typekit,但我知道它确实有更多设计师寻找的标准字体。只需将刷新作为其中的一部分。 :)
  • 实际上我对 typekit 的性能相当满意,而且我相信字体被缓存了,这提高了加载时间。我正在解决的问题是用一些下拉菜单做一个棘手的覆盖,问题是发生 $(document).ready 和渲染字体之间的时间。我实际上在观看页面加载时看不到它,但是如果您等待几分之一秒,$(el).width() 的值实际上是不同的:) 再次感谢您的回答。
  • 我根据客户的要求使用 typekit 做了 klim.com。如果你检查一下,那里会有很多 jquery
  • typekit应该有一个javascript api可以用来知道它什么时候加载,设置的超时东西是不可靠的,最好使用api知道什么时候加载,你应该重新审视这个。
猜你喜欢
  • 2014-05-31
  • 2011-01-11
  • 1970-01-01
  • 2012-09-03
  • 1970-01-01
  • 2022-11-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多