Question

我的代码如下所示，但它似乎在页面加载时立即启动，当我希望它在单击元素时启动。不知道为什么它会在页面加载时触发？

当计时器结束时，代码会从视图中删除“下一个问题”和“上一个问题”元素，因此用户必须结束测验。

要点击的元素（例如#pretest）理论上应该同时消失并启动计时器，但我尝试的每种方法都会打破计时器或计时器完全忽略规则。

Total JS newbie。

$(function() {
    $('#next-question,#prev-question').removeAttr('disabled');
    setTimeout(enableButton, 678000);

    function enableButton(){
        $('#next-question,#prev-question').css( 'display', 'none' ); 
        $('#next-question,#prev-question').attr("disabled", "false");
    }
});

function countdown() {
    var m = $('.min');
    var s = $('.sec');  
    if(m.length == 0 && parseInt(s.html()) <= 0) {
        $('.displayCounter_ng').html('Test Complete');    
    }
    if(parseInt(s.html()) <= 0) {
        m.html(parseInt(m.html()-1));   
        s.html(60);
    }
    if(parseInt(m.html()) <= 0) {
        $('.displayCounter_ng').html('<span class="sec">59</span> seconds'); 
    }
    s.html(parseInt(s.html()-1));
}
setInterval('countdown()',1000);

Answer 1

您的功能在页面加载时运行，因为您有

setInterval('countdown()',1000);

在你的函数定义之后。这意味着浏览器每1000毫秒（每秒）执行倒计时（）代码。相反，你可以像这样设置它，然后运行onclick，无论#pretest是什么

的index.html

<html>
    <head>
        <script type="text/javascript" src="js/counter.js"></script>
    <head>
    <body>
        <button id="pretest" onclick="countdown()">Click to start test</button>
    </body>
</html>

counter.js

function countdown() {
    setInterval(function() {
        // ... Countdown code here
    }, 1000);
}

Answer 2

就像Barmar和Cracker0dks所说的那样，setInterval会在页面加载时立即触发，所以你应该把它放在一个onclick监听器中。使用jquery是

$('#pretest').click(function(){
    id = setInterval(function(){countdown();}, 1000); //you'll need the id later
});

请注意，保留setInterval返回的结果，因为您需要它来清除完成后的间隔。

由于你想隐藏单击按钮后立即执行某些操作，即隐藏按钮，你应该将它添加到onclick监听器，因此它变为

$('#pretest').click(function(){
    //Hide elements here
    $('#next-question,#prev-question').hide();
    id = setInterval(function(){countdown();}, 1000);
});

当时间为零并且启用某些按钮时，您似乎也希望计时器操作结束，因此您需要编辑倒计时功能以清除计时器并在时间到零时显示按钮，因此它应该变为：

function countdown() {
    var m = $('.min');
    var s = $('.sec');  
    if(m.length == 0 && parseInt(s.html()) <= 0) {
        window.clearInterval(id);
        enableButton();
        $('.displayCounter_ng').html('Test Complete');    
    }
    if(parseInt(s.html()) <= 0) {
        m.html(parseInt(m.html()-1));   
        s.html(60);
    }
    if(parseInt(m.html()) <= 0) {
        $('.displayCounter_ng').html('<span class="sec">59</span> seconds'); 
    }
    s.html(parseInt(s.html()-1));
}

这里是小提琴的link

如何让我的javascript函数启动元素点击？

2 个答案:

的index.html

counter.js