не срабатывай второй ajax

    (function() {
const wheel = document.querySelector('.wheel');
const startButton = document.querySelector('.btn1');
const popupClose = document.querySelector('.popup__close');
var deg = 0;
const input = document.querySelector('#popup-callback-phone');
const inputnames = document.querySelector('#consumers-feedback-name');
startButton.addEventListener('click', func);
function func() {
$(document).on("click", ".js-form", function(e) {
        
        var errors = 0;
        var form = $(this).closest("form");

        if (errors == 0) {
            
            var b24trace = b24Tracker.guest.getTrace();
            
            var phone = '';
            phone = $(this).closest("form").find("input[name=phone]").val();
            
           var name = '';
            name = $(this).closest("form").find("input[name=name]").val(); //имя в форме
            
            //alert(id_user);

            jQuery.ajax({
                type: "POST",
                url: "/send",
                data: {
                    phone: phone,
                    name: name,
                    
                },
                
                
            });
            
        }
        console.log('Запрос 1 выполнен')
    });
    //проверяем инпуты
    if (input.checkValidity() & inputnames.checkValidity()) {
        startButton.style.pointerEvents = 'none';
        var x = Math.floor(Math.random() * (100)) + 1;
        if ((x % 33) == 0) {
            // 3 % вероятности
            deg = 300;
        } else if ((x % 14) == 0) {
            // 7% вероятности
            deg = 70;
        } else if ((x % 3) == 0) {
            // 30% вероятности 
            deg = 240;
        } else {

            x = Math.floor(Math.random() * (4)) + 1;
            // 15 % 
            if (x = 1) {
                //15%
                deg = 150;
            } else if (x = 2) {

                deg = 120;
            } else if (x = 3) {

                deg = 30;

            } else if (x = 4) {

                deg = 340;
            }
        }
        
        wheel.style.transition = 'all 7s ease-out';
        wheel.style.transform = `rotate(${deg + 1080}deg)`;
        // wheel.classList.add('blur');

        startButton.removeEventListener('click', func);
        
    }
    
}


wheel.addEventListener('transitionend',  () =>  { 
    //создаём куку
    document.cookie = "played=true;max-age=60";
    wheel.classList.remove('blur');
    startButton.style.pointerEvents = 'auto';
    wheel.style.transition = 'none';
    var actualDeg = deg % 360;
    wheel.style.transform = `rotate(${actualDeg}deg)`;

        var gifts;

        if (actualDeg >= 0 && actualDeg <= 45 ) {

            gifts = '1000 РУБЛЕЙ!';

        } else if (actualDeg >= 45 && actualDeg <= 90 ) {

            gifts = 'СКИДКУ 5% ';

        } else if (actualDeg >= 90  &&  actualDeg <= 135) {

            gifts = '586';

        } else if (actualDeg >= 135  && actualDeg <= 180) {

            gifts = 'БЕСПЛАТНО';

        } else if (actualDeg >= 181 && actualDeg <= 225) {
            

            gifts = 'Скидку 50% ';
            

        } else if (actualDeg >= 225 && actualDeg <= 270) {

            gifts = 'ФИРМЕННУЮ РУЧКУ!';

        } else if (actualDeg >= 270  && actualDeg <= 315) {


            gifts = 'СКИДКУ 10% ';

        } else if (actualDeg >= 315 && actualDeg < 360) {

            gifts = 'ФИРМЕННЫЙ ПОДАРОК!';

        } else { alert('net podarka');}
        
$(document).one("transitionend", ".js-form", function(e) {
        
            var b24trace = b24Tracker.guest.getTrace();
            
            var phone = '';
            phone = $(this).closest("form").find("input[name=phone]").val();
            
            //alert(id_user);

            jQuery.ajax({
                type: "POST",
                url: "/send",
                data: {
                phone: phone,
                gifts: gifts,
                    
                },
                
            });
        console.log("Запрос 2 выполнен");
    })
    
    document.getElementById("gifts").innerHTML = gifts;

почему у меня не срабатывает второй аякс по событию остановки анимации? он срабатывает только тогда когда закрываешь модальное окно


Ответы (1 шт):

Автор решения: mego4iter

https://developer.mozilla.org/ru/docs/Web/Events/transitionend

Событие transitionend срабатывает, когда CSS transition закончил свое выполнение. В случае, когда анимация удаляется до ее завершения(например, если transition-property [en-US] удаляется), то событие не срабатывает.

→ Ссылка