angularjs angular.js仅在窗口处于焦点时运行代码

b09cbbtk 于 2022-11-21 发布在 Angular

关注(0)|答案(3)|浏览(137)

我有一个setInterval函数，它每5秒运行一次。我希望该函数中的代码只在窗口处于焦点状态时才运行。我试过了，但似乎不起作用。

$scope.myFunction = function() {
  var isonfocus = true;  

  window.onblur = function() {  
    isonfocus = false;  
  }  

  window.onfocus = function() {  
    isonfocus = true;  
  }

  if (isonfocus) {   
    console.log("focused!");
  }
}

setInterval(function() {
  $scope.myFunction();
}, 5000);

angularjs

来源：https://stackoverflow.com/questions/30833802/angular-js-run-code-only-if-window-is-in-focus

3条答案

按热度按时间

polkgigr1#

我认为您正在寻找angular的$window Package 器，在函数之外定义isonfocus也会有很大帮助。

app.controller('Ctrl', function($scope, $window) {
  var hasFocus;

  $scope.myFunction = function() {
    $window.onblur = function() {  
      console.log('>onblur');
      hasFocus = false;  
    };  

    $window.onfocus = function() {  
      console.log('>onfocus');
      hasFocus = true;  
    };

    console.log(hasFocus ? 'focused' : 'not focused');
  };

  setInterval(function() { // or $interval
    $scope.myFunction();
  }, 5000);
});

赞(0）回复(0）举报 2022-11-21

yyyllmsg2#

如果使用页面可见性API并响应事件而不是轮询，这是否会更好？

app.run(['$rootScope', '$document', function ($rootScope, $document) {
    $document.on('visibilitychange', function () {
        $rootScope.$broadcast('visibilityChange', document.hidden, document.visibilityState);
    });
}]);

// in controller
$scope.$on('visibilityChange', function (event, hidden, visibilityState) {
    // respond to event

});

赞(0）回复(0）举报 2022-11-21

uqcuzwp83#

你意识到你在每次迭代时都在重新分配事件处理程序了吧？把onblur和onfocus事件处理程序移出你的$scope.myFunction，然后再试一次。

赞(0）回复(0）举报 2022-11-21