如何使用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>