0

У меня есть список div-ов, каждый div имеет свой таймер, который зависит от даты, когда он должен быть удалён, после чего div удаляется из списка. Напротив каждого дива есть кнопка - «обновить», при нажатии я отправляю идентификатор дива через ajax, а на бэке меняю время, когда значение должно быть удалено. Я записываю значение в атрибут даты. Сделал общую функцию таймера. И если данные возвращаются успешно, я пытаюсь остановить таймер и запустить его заново, но ничего не меняется - таймер не перезапускается. Как я могу это исправить?

var counter;
function startCount(dot) {
    const interv = setInterval(() => {
        const currSeconds = Math.round(new Date() / 1000);
        const deletingTime = Number(dot.data('time'));              
        const timeLeft = deletingTime - currSeconds;
        if (timeLeft < 0) return clearInterval(counter);                
        dot.siblings().html(formatTime(timeLeft));              
        var timerText = dot.siblings().html();              
        if(timerText === '00:00'){
            dot.closest('tr').css('display', 'none');
        };           
    }, 1000);
  return interv;
}         
$('.update-dots').each(function(){
    var obj = $(this);
    var deletingTime = Number($(this).data('time'));    
    var currentTime = Math.round(new Date() / 1000);;
    var liveCircle = deletingTime - currentTime;
    counter = startCount(obj);                  
});
$('.update-dots').each(function(){
    var obj = $(this);
    $(this).click(function(e){
        e.preventDefault();
            $.ajax({
                type: 'POST',
                url: '/ajax/update-timer',
                data: {
                'id': $(this).attr('id'), 
            },
            success: function(data)
            {
                console.log(data);
                obj.attr('data-time', data);
                clearInterval(counter);
                counter = startCount(obj);          
            }
        });
    });
})

1 ответ 1

0

Возможно дело в том, что у вас глобальный id таймера затирается последней итерацией в цикле each. Сделайте переменную с id таймера локальной или поместите её в какой-то контекст, отвечающий только за один блок. Например так:

function startCount(dot) {
    const interv = setInterval(() => {
        const currSeconds = Math.round(new Date() / 1000);
        const deletingTime = Number(dot.data('time'));              
        const timeLeft = deletingTime - currSeconds;
        if (timeLeft < 0) return clearInterval(counter);                
        dot.siblings().html(formatTime(timeLeft));              
        var timerText = dot.siblings().html();              
        if(timerText === '00:00'){
            dot.closest('tr').css('display', 'none');
        };           
    }, 1000);
  return interv;
}

$('.update-dots').each(function(){
    var obj = $(this);
    // тут были зачем-то переменные, которые нигде не используются
    var counter = startCount(obj);
    
    obj.click(function(e){
        e.preventDefault();
            $.ajax({
                type: 'POST',
                url: '/ajax/update-timer',
                data: {
                'id': $(this).attr('id'), 
            },
            success: function(data)
            {
                console.log(data);
                obj.attr('data-time', data);
                clearInterval(counter);
                counter = startCount(obj);          
            }
        });
    });
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.