写在前面的话
在这篇文章中,我会详细介绍这个项目的灵魂所在:备忘闹钟铃声提醒功能的实现
非常感谢你能看到这篇文章,也希望你能继续看下去……
time_watch
程序一旦开始运行,初始化dom结构后,便会运行time_watch(时间监听函数)
//时间监听
function time_watch(){
var nowtime;
time_check();
watcher = setInterval(function(){
nowtime = new Date().getTime();
if(nowtime > timeobj.neartime){//到达预定时间
time_get();
}
},1000);
}
time_check
在运行time_watch函数时,便会执行它内部的time_check(时间检查函数)。
time_check的作用是从所有的未完成的备忘中,选取一个离现在最近的备忘
//时间检查 获取离现在最近的一个任务
function time_check(){
var key,object,state;
timeobj.neartime = new Date("2020-01-01").getTime();
for(var i=0;i<localStorage.length;i++){
key = localStorage.key(i);
/*JSON.parse将string转换为json*/
object = JSON.parse(localStorage.getItem(key));
state = object.state;
if(state){//未完成
var stime = new Date(object.time).getTime();//获取预定时间
if(stime < timeobj.neartime){//如果有更近的时间
timeobj.neartime = stime;
timeobj.nearflag = i;
timeobj.obj = object;
}
}
}
}
//时间达到预定后处理
执行完time_check函数后,获得了离现在最近的一个备忘后,程序又继续执行time_watch函数,此时开启了一个时间监听器watcher = setInterval()。time_watch每隔一秒便判断是否达到备忘提醒时间。
如果达到了,便执行time_get函数
time_get
达到提醒时间后,执行time_get函数(时间达到后处理函数)
//时间达到预定后处理
function time_get(){
alert.play();//闹钟提醒
idFlag = timeobj.nearflag;
thing_change();
time_remain();
init();
time_reset();//开启下一次事件的监听
}
首先播放闹钟铃声,并且改变备忘状态(由未完成改为已完成)。然后在页面上进行显示提醒(time_remain函数)
time_remain
//显示提醒面板
function time_remain(){
var str='<li>'+
'<div class="alert alert-warning alert-dismissible fade in" role="alert">'+
'<button type="button" class="close" data-dismiss="alert" aria-label="Close">'+
'<span aria-hidden="true">知道了</span>'+
'</button>'+
'<strong>注意!</strong>'+
'<span style="margin-left:10px">'+timeobj.obj.content+'</sp an>'+
'</div>'
'</li>';
$('#rList').append(str);
}
提醒完成后,又调用time_reset函数(重置time_watch)
time_reset
//重新监听时间
function time_reset(){
clearInterval(watcher);//事件树已经变化,需要重新监听
time_watch();
}
接下来的事,又重新交还给了time_watch。它会再调用time_check函数。重新获得一个离现在最近的备忘。
然后每秒一次的去监听提醒时间,这形成了一次次的循环。
到这里,我这个项目的灵魂所在,闹钟功能的实现已经说完了。但是有两个点我需要提醒一下:
你应该发现了我的数据操作函数里都执行了init函数,为什么?因为数据操作后dom树结构已经变化,需要重新初始化dom树结构。
我的操作函数里都执行了time_reset函数,为什么?同样的道理。因为数据操作后dom树结构已经变化,也需要重新监听提醒时间。