在jQuery AJAX 中再次运行setInterval

k4emjkb1  于 2022-11-03  发布在  jQuery
关注(0)|答案(1)|浏览(187)

我想在setInterval结束后再运行一次,但是在 AJAX 中运行后,它开始显示奇怪的数字,在下面的图片中很清楚。
当我运行页面时,setInterval可以工作,但是当时间到期并且我发出 AJAX 请求时,它不会再次开始递减。请帮助我。
我所有的代码都是。

const TIME_LIMIT = 10; // 10 second
let timePassed = 0;
let timeLeft = TIME_LIMIT;
let timerInterval = null; 

function onTimesUp() {
 clearInterval(timerInterval);
}

function startTimer() {
 timerInterval = setInterval(() => {
   timePassed = timePassed += 1;
   timeLeft = TIME_LIMIT - timePassed;
   document.getElementById("dividname").innerHTML = formatTime(
     timeLeft
   );
   if (timeLeft === 0) {
     onTimesUp();
   }
 }, 1000);
}
function formatTime(time) {
 const minutes = Math.floor(time / 60);
 let seconds = time % 60;
 if (seconds < 10) {
   seconds = `0${seconds}`;
 }
 return `${minutes}:${seconds}`;
}

这是我的 AJAX 代码,它发送请求并执行success,但setInterval没有正确执行。(我在下面画了一张图)。

$.ajax({
    type: 'POST',
    url: aw_ajax_url,
    dataType: 'json',
    data: {
        'action': 'acttionname', 
    },
    success: function (data) { 
       onTimesUp();
       document.getElementById("dividname").text =  timeLeft;
       startTimer(); 
    } 
});

重新启动 AJAX 后的图像:这是可悲的

最后注意事项:我想要setInterval to restart every time我做一个 AJAX 请求。谢谢你的帮助。

jexiocij

jexiocij1#

我想你忘记重置timeLeft和timePassed了。另外,设置innerText是不必要的,因为它已经由计时器处理了。它应该是这样的:

success: function(data) { 
    onTimesUp();
    timePassed = 0;
    timeLeft = TIME_LIMIT;
    startTimer();
}

相关问题