javascripthtmlcssjspx

Javascript shows several notification in a certain time

Here is my JSP code

here i use alertify.js for notification and use javascript for grab time. in certain time it shows 8 notification at time.

(function () {
    function checkTime(i) {
        return (i < 10) ? "0" + i : i;
    }

    function startTime() {
        var today = new Date(),
            h = checkTime(today.getHours()),
            m = checkTime(today.getMinutes()),
            s = checkTime(today.getSeconds());
            // ms = checkTime(today.getMilliseconds());
        document.getElementById('time').innerHTML = h + ":" + m + ":" + s;
         t = setTimeout(function () {
            startTime()
        }, 100);
    
    if(h==16 && m==52 && s==00 )
                {
             alertify.notify('sample', 'success', 60, function(){  console.log('dismissed'); });
                    }
                    else  if(h==17 && m==01 && s==00 )
                {
             alertify.notify('difficult', 'success', 60, function(){  console.log('dismissed'); });
                    }
                
    }
 
        startTime();   
})();
 <script src="js/alertify.min.js"></script>
<!-- include the style -->
<link rel="stylesheet" href="css/alertify.min.css" />
<!-- include a theme -->
<link rel="stylesheet" href="css/default.min.css" />
<!-- CSS -->

<!-- CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/alertifyjs/1.4.1/css/alertify.min.css"/>
<!-- Default theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/alertifyjs/1.4.1/css/themes/default.min.css"/>
<!-- Semantic UI theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/alertifyjs/1.4.1/css/themes/semantic.min.css"/>
<!-- Bootstrap theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/alertifyjs/1.4.1/css/themes/bootstrap.min.css"/>

<!-- 
    RTL version
-->
<link rel="stylesheet" href="//cdn.jsdelivr.net/alertifyjs/1.4.1/css/alertify.rtl.min.css"/>
<!-- Default theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/alertifyjs/1.4.1/css/themes/default.rtl.min.css"/>
<!-- Semantic UI theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/alertifyjs/1.4.1/css/themes/semantic.rtl.min.css"/>
<!-- Bootstrap theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/alertifyjs/1.4.1/css/themes/bootstrap.rtl.min.css"/>
        

 
     
<div id="time"></div>

I want to see one notification in certain time. but how can be it possible ?

Solution

  • You are checking the time 10 times every second (every 100ms), that's probably the reason why you are getting many alerts. Replace 100 with 1000 and it should work:

    function startTime() {
    var today = new Date(),
    h = checkTime(today.getHours()),
    m = checkTime(today.getMinutes()),
    s = checkTime(today.getSeconds());
    // ms = checkTime(today.getMilliseconds());
    document.getElementById('time').innerHTML = h + ":" + m + ":" + s;
    t = setTimeout(function () {
        startTime()
    }, 1000);
    // ^^^^

    if(h==16 && m==52 && s==00 )
    {
        alertify.notify('sample', 'success', 60, function(){  console.log('dismissed'); });
    }
    else  if(h==17 && m==01 && s==00 )
    {
        alertify.notify('difficult', 'success', 60, function(){  console.log('dismissed'); });
    }

}