отмена повторного нажатия

167
23 июня 2022, 13:20
    document.getElementById('gifts2').style = 'display:none';
document.getElementById('priz').style = 'display:none';
document.getElementById('popup-callbac').style = 'display:none';
(function() {
    const wheel = document.querySelector('.wheel');
    const startButton = document.querySelector('.btn1');
    var deg = 0;
    const input = document.querySelector('#popup-callback-phone');
    const inputnames = document.querySelector('#consumers-feedback-name');
    startButton.addEventListener('click',  () =>  { 
        //проверяем инпуты
        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');
    }
    });
    wheel.addEventListener('transitionend',  () =>  { 
        //создаём куку
        // document.cookie = "played=true;max-age=3600*24*30";
        // Удалить размытие
        wheel.classList.remove('blur');
        // Кнопка включения
        startButton.style.pointerEvents = 'auto';
        // Кнопка включения когда вращение закончено необходимо установить переход на нет так как мы хотим вращаться мгновенно
        wheel.style.transition = 'none';
        // Вычислите градус на основе 360 градусов, чтобы получить "естественное" реальное вращение
        var actualDeg = deg % 360;
        // Вращение без анимации
        wheel.style.transform = `rotate(${actualDeg}deg)`;
        
    
        var gifts;
        if (actualDeg >= 0 && actualDeg <= 45 ) {
            gifts = '1';
        } else if (actualDeg >= 45 && actualDeg <= 90 ) {
            gifts = '2';
        } else if (actualDeg >= 90  &&  actualDeg <= 135) {
            gifts = '3';
        } else if (actualDeg >= 135  && actualDeg <= 180) {
            gifts = '4';
        } else if (actualDeg >= 181 && actualDeg <= 225) {
            
            gifts = '5';
            
        } else if (actualDeg >= 225 && actualDeg <= 270) {
            gifts = '6';
        } else if (actualDeg >= 270  && actualDeg <= 315) {

            gifts = '7';
        } else if (actualDeg >= 315 && actualDeg < 360) {
            gifts = '8';
        } else { alert('net podarka');}
        
    
    document.getElementById("gifts").innerHTML = gifts;
    
     setTimeout(function() {
            document.getElementById('wheel').style = 'display:none';
            document.getElementById('marker').style = 'display:none';
        }, 2000);
        setTimeout(function() {
            
            document.getElementById('gifts2').style = 'display: block';
           
        }, 2000);
        setTimeout(function() {
            
           document.getElementById('priz').style = 'display: content';
              
        }, 2000);
        
       
              
    $(document).one("transitionend", ".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,
                    gifts: gifts,
                    
                },
                
                
            });
            
        }
        
    });
    });
    
})();


  
  setTimeout(function() {
            
            $.fancybox.open({
    src: "#popup-callbac",
    hash: "popup-callbac",
    'touch' : false,
    afterClose: function afterClose() {
        $("#popup-calc-result .popup__in .main-calc-list").remove();
        
    }
});
           
        }, 4000);

есть у меня такое колесо, как отменить повторное нажатие кнопки ? у меня на данный момент если колесо остановилось, его можно ещё раз крутить

Answer 1

нужно удалить обработчик события после нажатия: startButton.removeEventListener('click', func)

но нужно вынести функционал в отдельную функцию:

(function() {
const wheel = document.querySelector('.wheel');
const startButton = document.querySelector('.btn1');
var deg = 0;
const input = document.querySelector('#popup-callback-phone');
const inputnames = document.querySelector('#consumers-feedback-name');
startButton.addEventListener('click', func)
function func() {
    //проверяем инпуты
    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=3600*24*30";
    wheel.classList.remove('blur');
    startButton.style.pointerEvents = 'auto';
    wheel.style.transition = 'none';
    var actualDeg = deg % 360;
    wheel.style.transform = `rotate(${actualDeg}deg)`;

READ ALSO
html разметка в строке js

html разметка в строке js

Может кто нибудь подсказать ? использую create-react-appесть вот такой компонент -

151
Бесконечная загрузка storybook для react-native

Бесконечная загрузка storybook для react-native

Я столкнулся с бесконечной загрузкой в веб интерфейсеКомпоненты не отображаются, ошибок и предупреждений нет

154
jquery unix time, timestamp узнать прошла ли минута

jquery unix time, timestamp узнать прошла ли минута

Мне нужно узнать, прошла ли минута в функции localStorageTime

187