Как сделать так, чтобы отправка ajax-запроса происходила после событий мыши?

Я отслеживаю движение мыши по нескольким элементам на HTML-странице. Я использовал этот [вопрос][1] для функции перемещения мыши. Затем я отправляю количество времени, проведенного пользователем над элементом, с помощью запроса ajax POST на запрос Django view, который сохраняет его в базу данных каждый раз, когда происходит новое движение. Теперь я могу сделать это, но я заметил, что время от времени один из элементов хранит метку времени, а не количество секунд. похоже, что js портит вычисления здесь:

mouseoverTime = currentTime.getTime() - mouseenterTime;

похоже, что mouseenterTime не обновляется событием mouseenter и остается zero, следовательно mouseoverTime становится currentTime.getTime()

Я запутался, потому что это не происходит постоянно, и я не получаю никаких ошибок. может ли это быть из-за проблемы при загрузке страницы? или мне нужно поместить переменную mouseenterTime внутрь функции?

вот мой js код:

d3.select(window).on('load', function () {

   let mouseenterTime = 0;

 $(document).on('mouseenter mouseleave', '#gender_question', function (evt) {
    let currentTime = new Date();

    if (evt.type === 'mouseenter') {

      mouseenterTime = currentTime.getTime();

    } else if (evt.type === 'mouseleave') {
      
      mouseoverTime = currentTime.getTime() - mouseenterTime;
  
      $.ajax({
        type: 'POST',
        url: `${server_url}/z/x/x/`,
        data: {
          'svg': 'gender_question',
          'mouseoverTime': mouseoverTime
        },
        success() {
          console.log(`question mouseover time was: ${mouseoverTime}`);
        },
      });
    }
  });
});

вот мой view.py:

def task_view(request ,task):
    participant = get_object_or_404(Participant, user=request.user)

    svg_list = SVG.objects.filter()

    svg1 = svg_list[0]


    movement1, created = Movement.objects.get_or_create(participant=participant, svg=svg1)


    if request.method == 'POST':

        current_svg = request.POST.get('svg')
        seconds = request.POST.get('mouseoverTime')
    

        if current_svg == str(svg1):
            movement_db = movement1.total_time
            
            if movement_db == 0: 
                movement = movement1
                movement.total_time = seconds
                movement.save()
            else:
                movement = movement1
                movement.total_time = int(seconds) + movement_db
                movement.save()
                    

models.py

class Movement(models.Model):
    participant = models.ForeignKey(Participant, on_delete=models.CASCADE)
    svg = models.ForeignKey(SVG, on_delete=models.CASCADE)
    total_time = models.FloatField(default=0, blank=True, null=True)

Как сделать так, чтобы временная метка не сохранялась в базе данных при загрузке страницы, а проходила через вычисления и затем сохранялась? [1]: jQuery определяет, сколько секунд мышь остается над элементом

Вернуться на верх