31811


es6で書いているので $interval と書いていますが、 setIntervalと同じです。

OS:  
OSX El Capitan

ブラウザ:  
Safari バージョン 9.1.2 (11601.7.7)  
Google Chrome 55.0.2883.95 (64-bit)

以下のコードで、save();が2回呼ばれてしまいます。  
原因を教えていただけますか。

[code]

    var timeout;
    $(window).on("focus",() => {
      timeout = $interval(() => {
        console.log("window is active");
        var time = 0;
        time++;
        console.log(time);
        save();
      }, 1000);
    }).on("blur",function(){
      $interval.cancel(timeout);
      console.log("window is not active");
    });
    
[/code]


CC BY-SA 3.0
2017-01-12T17:39:29.460
31801
2017-01-13T06:10:16.310
7641
question
javascript safari es6
Safariにて $(window).on("focus"〜 すると setInterval が 2回実行される


試したらjQueryの$(window).on('focus')はSafariだと二回走りました。

windowがactiveになったかどうか判断する方法はブラウザごと違って、jQueryでは内部で吸収して$(window).on('focus')で判定できるようにしてるっぽいですが、たぶんSafariで仕様が変わって二回走るようになっちゃったとかじゃないでしょうか。

jQueryで判定するなら以下のようにinterval動いてるときは実行しないとかするしかないかな。

[code]

    var timeout;
    $(window).on("focus",() => {
      if ( timeout ) {
        return;
      }
      timeout = $interval(() => {
        console.log("window is active");
        var time = 0;
        time++;
        console.log(time);
        save();
      }, 1000);
    }).on("blur",function(){
      $interval.cancel(timeout);
      timeout = null;
      console.log("window is not active");
    });
    
[/code]

[code]

    var focusCount = 0;
    $(window).on('focus', function(evt){
      console.log(evt);
      $('#output').text(++focusCount);
    });
[/code]

[code]

    <p id="output">0</p>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
[/code]


CC BY-SA 3.0
2017-01-13T06:04:26.107
31811
2017-01-13T06:10:16.310
2017-01-13T06:10:16.310
19526
19526
31801
answer