如何让我的javascript函数在元素单击时启动？

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

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

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

总的JS新手

$(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);

---

您的函数正在页面加载时运行，因为您

setInterval('countdown()',1000);

在函数定义之后。这意味着浏览器每秒每1000毫秒执行一次倒计时代码。相反，您可以这样设置它，并运行onclick进行任何预测试

index.html

---

正如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));
}

---

下面是一个例子

您正在调用setInterval'countdown'，1000在顶级，而不是在单击处理程序中。因此，它将在页面加载后1秒开始倒计时；事件处理程序。所以这在点击上不起作用。亚历克斯，谢谢你的建议！是否可以在一个页面内运行此代码而不调用外部JS文件？我尝试将倒计时代码与“函数倒计时”代码一起放置，并按照您的建议将其链接到onclick事件，但计时器没有启动。当然！是的，您只需在html下面添加脚本标记，就可以用单个文件运行它了//这里是JavaScript

$('#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));
}