javascript - 如何使用 AngularJS 每 3 秒跟踪一次鼠标位置？

Question

我正在开发 MEAN 堆栈应用程序，我需要每 3 秒跟踪一次鼠标位置，将该数据保存在数组中，然后将其存储到我的数据库中。

我从这个开始，但我不知道如何完成它:

HTML

<div class="field" ng-mousemove="captureCoordinate($event)">

My view is inside here

</div>

JavaScript

//I need to save this into my database
const data = {
      minutes,
      seconds,
      playerId,
      level,
      clicks,
      objectsToFind,
      tracking[]       <--- this should be the array with the tracking info
    }


//This is what I tried to get the mouse coordinates from my HTML
$scope.captureCoordinate = function($event){
      $scope.x = $event.x;
      $scope.y = $event.y;
   }

Answer 1

您可以在鼠标移动时将坐标存储在局部变量中，然后使用该局部变量的值每 3 秒更新一次作用域变量。

类似于:

var app = angular.module("myApp", []);

app.controller('myApp', ['$scope', function($scope) {
  const data = {
    tracking: []
  }
  let coords;
  $scope.trackCoords = function($event) {
    coords = [$event.pageX, $event.pageY];
  };
  setInterval(function() {
    data.tracking = coords;
    console.log(data.tracking);
  }, 3000);


}]);

.field {
  margin: 2%;
  height: 500px;
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
<div ng-controller="myApp" ng-app="myApp" class="field" ng-mousemove="trackCoords($event)">
  My view is inside here
</div>