由于我系统的需求,需要一个计时器功能,并且当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>