2011-12-13 22 views
0

ウェブサイトで次の関数を使用しています。私が使用している厄介なjQueryを排除するスタンドアロン関数として宣言せずにこの関数を複数回実行する方法はありますか?コードを何回もコピーして貼り付けないでください。javascriptのsetTimeoutを使用して何度か匿名関数を実行する

別紙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); 
+0

setTimeout(基本的にはX秒ごとに実行)または同じ関数でsetTimeoutをn回呼び出すだけで、最後に自分自身を呼び出すようにしたいですか? – Corbin

答えて

3
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); 
}); 
+0

ネイティブjsとのマッピングの良い使用 – cwd

+0

+1ありがとう非常に – cwd

+0

+1 forEachについて私は知らなかった。それは良いものです。私はそれを使用します。私はちょうどFirefoxをチェックし、作品は、すべての主要なブラウザをチェックし、それらの一部である場合、これはあなたが使いやすさの面で私に示した非常に素晴らしいものです。 –

3

はい、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をやってと同じ効果を持っている必要があります...

+0

10秒後にどのように停止できますか? – cwd

+0

setIntervalを使用する場合は、clearIntervalを使用できます。または、1,3などから数えなければならない場合は、経過時間の変数を持つことができ、10秒を超えると最終的なsetTimeoutを呼び出すことはできません。 –

+0

+1ありがとう非常に – cwd

1

あなたは$.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); 

}); 
+0

実際にはうまく動作していません。マッピングループは機能しますが、setTimeoutは1つだけ設定されます。 – cwd

+0

これは、時間とインデックスの値が混ざっているはずです。 –

+0

k、ありがとう。 +1: – cwd

1
(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); 
    } 
})(); 

を使用することができますクロージャが宣言をカプセル化していないし、ゴミはもう一度収集に使用されます。確かにこれのポイント。非常に奇妙な。

+0

がうまく見えます。 +1。これは、Navkitのフォントがtypekitを使ってレンダリングされた後にナビゲーションメニュー項目のサイズを変更しているので、タイムアウトが必要です。ユーザーが接続が遅い場合は複数あります; – cwd

+0

Googleのフォントを使用する方が良いです。起こるリフレッシュはありません。私はタイプキットが嫌いですが、私はそれがデザイナーが探しているより多くの標準的なフォントを持っていることを理解します。ちょうどその一部としてリフレッシュを取らなければならない。 :) –

+0

実際、私はかなりタイプキットの性能に満足しており、フォントはロードタイムを改善するためにキャッシュされていると信じています。私が解決している問題は、いくつかのドロップダウンメニューで厄介なオーバーレイをすることです。問題は、$(document).readyが発生してからフォントがレンダリングされるまでの時間です。私は実際にページの読み込みを見ているときにそれを見ることができませんが、$(el).width()の値は実際には異なります。 – cwd

関連する問題