js实现可刷新的简易计时器

由于我系统的需求,需要一个计时器功能,并且当input焦点变化时刷新,当超过最大时长之后执行某表单保存方法。现将此段代码记录下来:

<body>
    <input type="text" id="lable" readonly/>
    <input type="text" name="demo-input" style="width: 500px" placeholder="任何input框获得或失去焦点时,视为正在操作,计时器将重置" />
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
(function(){
    timing(function(){
        $('#lable').val('Successful auto saved!');
    },5);
})();
/**
 * 计时器方法
 * 
 * @param  {function} save    自定义save方法,时间超过max后自动执行此方法
 * @param  {int} maxTime 最大时间
 * @return {int} k       可通过返回值k通过clearInterval(k)关闭定时器
 */
function timing(save,maxTime){
    var timer = 0,
        clear = function(){
            timer = 0;
        },
        save_clear = function(){
            save();
            clear();
        };

    $('input').focus(function(){
        clear();
    }).blur(function(){
        clear();
    })

    return setInterval(function(){
        $('#lable').val(maxTime - timer);
        timer >= maxTime ? save_clear() : timer += 1;
    },1000);
}
</script>

猜你喜欢

转载自blog.csdn.net/github_37835908/article/details/77601603