规则之树

jquery定时执行setInterval方法,手动开启和暂停

最近要实现一个需求,就是实现一个可以控制的定时执行方法。网络上的参考价值不大,所以很干脆的手写了一遍,最终实现了效果,所以发文章留做记录。首先的思路就是,设置一个隐藏的input,通过它来控制setInterval的开关,因为直接通过方法传值似乎是不生效的,所以我采用了这个办法,来实现更好的控制。

html代码如下:

<input type="hidden" id="start" value="1"/>

对于定时执行的主方法,我先定义了对id为start文本框的值修改,然后在setInterval中读取这个文本框,如果值为0则被停止。

function start(n){
    $("#start").val(n);
    var ref = setInterval(function(){
        //需要执行的方法也写在这里
        var start = Number($("#start").val());
        if(start==0){
            clearInterval(ref);
        }
    },3000);
}

最后,就是加两个负责控制开始和暂停的按钮了

<button class="start" onclick="start(1)">开始</button>
<button class="timeout" onclick="start(0)">暂停</button>

到此,整个功能就成功了。

当前页面是本站的「Google AMP」版。查看和发表评论请点击:完整版 »