javascript - setInterval中断重新触发倒计时时间点不对？

问题描述

问 题

// 发送语音

var clock = '';
var nums = 5;
var btn = $('<div class="videoClock">' + nums + 's</div>');


$(document).on('click', '[class^="horn_icon"]', function() {
    var that = $(this);
    if (that.is(".horn_icon_off")) {
        that.attr('class', 'horn_icon_on');
        $(".input_write").html(btn);
        timeCtrlBtn();
    } else {
        that.attr('class', 'horn_icon_off');
        $(".input_write").html('<input type="text" name="talkfonts" value="" placeholder="Type something">');
        clearInterval(clock); //清除js定时器
        nums = 5; //重置时间
    }
});




var timeCtrlBtn = function() {
    clock = setInterval(doLoop, 1000); //一秒执行一次
};
var doLoop = function(thisBtn) {
    nums--;
    if (nums > 0) {
        btn.text(nums + 's');
        console.log(clock);
    } else {
        console.log(nums);
        nums = 5; //重置时间
        clearInterval(clock); //清除js定时器
        clock = '';
        console.log(clock);
        $(".horn_icon_on").attr('class', 'horn_icon_off');
        $(".input_write").html('<input type="text" name="talkfonts" value="" placeholder="Type something">');


    }
};
/* end */

解决方案

$(".input_write").html(btn);
这句，btn里面的值并没有更新，所以.html()之前要更新一下btn里面的值
$(".input_write").html(btn.text(nums + 's'));

这篇关于javascript - setInterval中断重新触发倒计时时间点不对？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！