2016-11-10 4 views
1

Vueを学ぶときに、コンポーネントデータを更新する2つのタイマーを作成しました。コピー/貼り付けのときは、誤ってsetInterval()の2番目の関数の名前を変更しませんでしたが、コードは正しく実行されます(Vueの部分は関係ありません。機能的な例があるようにしていますが、setInterval()は異なる関数名を必要としますか?

var data_mynumber = { 
 
    time: 1 
 
}; 
 

 
Vue.component('mynumber', { 
 
    template: '<div>time is {{time}}</div>', 
 
    data: function() { 
 
    return data_mynumber; 
 
    } 
 
}) 
 

 
var data_smthg = { 
 
    time: 5 
 
}; 
 

 
Vue.component('smthg', { 
 
    template: '<div>hello {{time}}</div>', 
 
    data: function() { 
 
    return data_smthg; 
 
    } 
 
}) 
 

 

 
var vm = new Vue({ 
 
    el: '#root' 
 
}) 
 

 
setInterval(
 
    function myTimer() { 
 
    var d = new Date(); 
 
    data_mynumber.time = d.toLocaleTimeString(); 
 
    }, 
 
    1000 
 
); 
 

 
setInterval(
 
    function myTimer() { 
 
    var d = new Date(); 
 
    data_smthg.time = d; 
 
    }, 
 
    100 
 
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.js"></script> 
 
<div id="root"> 
 
    <mynumber></mynumber> 
 
    <smthg></smthg> 
 
</div>

setInterval()コール同じ関数名myTimer()両方、それらの各々が異なっている:コードの下部にタイマー)約。コードは期待どおりに実行されます。タイマーのテンポが異なります。

これは偶然でも、私のsetInterval()コールで同じ関数名を再利用できますか?

+0

あなたがすべてで関数名が必要ですでしょうか?匿名のコールバックを作成しています。 –

+0

@DavinTryon:これが可能であるかどうかはわかりませんでした。私は誰かが同じものを探している場合は、受け入れられた答えを実際のコードで更新しました。 – WoJ

答えて

2

実際には、関数の名前は必要ありません。これは匿名関数やラムダと呼ばれ、名前に違いはありません。パラメータ、コールバックとして渡しています。関数の名前を呼び出さず、参照を呼び出します。あなたのコードの場合は

これは

setInterval(
    function() { 
    var d = new Date(); 
    data_mynumber.time = d.toLocaleTimeString(); 
    }, 
    1000 
); 
+0

ありがとうございます。私は関連するコードを追加するためにあなたの答えを更新しました。 – WoJ

+0

ありがとう@WoJ! –

4

関数名のスコープが異なるため、衝突しません。

- デバッグの場合、別の名前を使用すると便利です。

+2

具体的には、名前付き関数式の名前のスコープは、関数の本体です。 – Barmar

関連する問題