Я пытаюсь получить процент положения мыши на экране. когда я получаю координаты мыши, я хочу отправить ajax запрос на бэкэнд X, Y.
У меня уже есть функция положения мыши, но когда я пишу функцию ajax внутри слушателя событий mousemove, он отправляет слишком много запросов на бэкэнд. Мне нужно отправлять запрос каждые X секунд после перемещения мыши. Я попробовал функцию setInterval, но она не работает. когда пользователь перемещает курсор и останавливает его, то через 5 секунд он должен отправить ajax запрос, как выглядит мой код.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="{{ csrf_token() }}" />
<title>Document</title>
<style>
body {
margin: 0;
overflow: hidden;
width: 100vw;
height: 100vh;
background: skyblue;
font-weight: bold;
font-family: arial;
}
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-
9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script>
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
// Container and displays
const container = document.querySelector("body");
let posXDisplay = document.getElementById("posX");
let posYDisplay = document.getElementById("posY");
// On mousemove
container.addEventListener("mousemove", (e)=> {
// Do math
xPercent = parseInt(e.pageX / window.innerWidth * 100);
yPercent = parseInt(e.pageY / window.innerHeight * 100);
setInterval(function(){
$.ajax({
type:'POST',
url:'/getImage',
data:{xPercent:xPercent, yPercent:yPercent},
success:function(data){
let src = data;
$('body').css('backgroundImage','url('+src+')');
}
});
console.log(xPercent ,yPercent )
}, 5000);
});
</script>
</body>
</html>