写在前面的话

在这篇文章中,我会详细介绍这个项目的灵魂所在:备忘闹钟铃声提醒功能的实现

非常感谢你能看到这篇文章,也希望你能继续看下去……

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树结构已经变化,也需要重新监听提醒时间。