How to load a site depending on hours and minutes

问题内容:

I have four screens that I want to display in the following order.

Screen1(2 seconds) -> Screen2 (2 seconds) -> Screen3 (2 Seconds)

I also have a fourth screen which should only show when the time is between 05:55-06:05 and 17:55-18:05

In order to accomplish this my code looks like this till now:

function timecondition() {
        var hours = new Date();
        var minutes = new Date();
        var h = hours.getHours();
        var m = minutes.getMinutes();
        var timecondition;
        if((h == 5 && m >= 55) || (h == 6 && m <= 5) || (h == 17 && m >= 55) || (h == 18 && m <= 5)) {
            timecondition = true;
        }
        else {
            timecondition = false;
        }
        return timecondition;
    }
    $(document).ready(
        function() {            

            setInterval(function() {
                setTimeout(function() {
                    if(timecondition()) {
                        $('#show').load("http://localhost:8084/test/screen4");
                    }
                    else {
                        $('#show').load("http://localhost:8084/test/screen1");
                    }
                }, 2000);
                setTimeout(function() {
                    if(timecondition()) {
                        $('#show').load("http://localhost:8084/test/screen4");
                    }
                    else {
                        $('#show').load("http://localhost:8084/test/screen2");
                    }
                }, 4000);
                setTimeout(function() {
                    if(timecondition()) {
                        $('#show').load("http://localhost:8084/test/screen4");
                    }
                    else {
                        $('#show').load("http://localhost:8084/test/screen3");
                    }
                }, 6000);
            }, 6000);      
        }
    );

Unfortunately it doesnt work like I want it to be.
When I start the webapplication at 05:54 the sequence(screen1->screen2->screen3)
But once the clock hits 05:55 it won’t display the fourth screen, like it was in my intention.
When I start the application within the timecondition eg. at 05:56 it shows the fourth screen, but won’t leave screen4 when the timecondition is not true anymore a few minutes later.

Is it because I need dynamic functions?

问题评论:

1  
I cannot tell why your screen4 is not shown, however I see your boolean condition is invalid because you do not combine hours and minutes together, so that 5:05, 17:05 and 18:55 etc. also match right now. Also creating two dates of now is not necessary.

答案:

答案1:

Couple of potential bugs there.

1. You are taking the time twice

Every time you call new Date() you are taking a snapshot of an instant. In this case they are only milliseconds away from each other, but it’s a bug nonetheless.

var hours = new Date();
var minutes = new Date();

One object should be enough:

var now = new Date();
var h = now.getHours();
var m = now.getMinutes()

2. Your time condition is wrong

var timecondition;
if((h == 5 || h == 6 || h == 17 || h == 18) && (m >= 55 || m <= 05)) {
    timecondition = true;
}
else {
   timecondition = false;
}
return timecondition;

There is two problems with this:

a) It is hiding the function name from within. This is just a minor bug and doesn’t affect the functionality here yet.

b) You are checking for hours and minutes independently. This IS a serious bug because it doesn’t comply with your business logic.

That whole code above can be smarter rewritten as:

h = h % 12
return (h == 5 && m >= 55) || (h == 6 && m <= 5)

3. You reload the page every few seconds

The second argument to setInterval and setTimeout respectively is in milliseconds. So you are issuing a load every 2 seconds.

4. You are nesting timeouts within intervals

This basically means that every six seconds you are setting a timer for the next 2, 4 and 6 seconds. This is not really a bug, but unnecessarily complex. Why not set one interval for running every two seconds?

Here’s some refactored and hopefully fixed code. Didn’t try it out yet, though.

function slideshow() {
    var screens = [
        "http://localhost:8084/test/screen1",
        "http://localhost:8084/test/screen2",
        "http://localhost:8084/test/screen3"
    ]
    var specialScreen = "http://localhost:8084/test/screen4";
    // Contains the index of currently shown screen or -1
    // when the special screen is shown
    var currentScreen = 0;
    // Cache the element here so we don't need to search for it every two seconds
    var show = $('#show');

    function timecondition() {
        var now = new Date();
        var h = now.getHours();
        var m = now.getMinutes();
        h = h % 12;
        return (h == 5 && m >= 55) || (h == 6 && m <= 5)
    }

    function update() {
        if (timecondition()) {
            if (currentScreen != -1) {
                show.load(specialScreen);
                currentScreen = -1;
            }
            return;
        }
        currentScreen = (currentScreen + 1) % screens.length
        show.load(screens[currentScreen])
    }
    setInterval(update, 2000)
}
$(document).ready(slideshow)

答案评论:

1  
Wow, thanks a lot Hubert! That worked great! I have one little question left. How do I go on when I want different intervals for the screens? Eg Screen1 3 seconds, screen2 10 seconds and screen3 5 seconds?
– mrk
5 hours ago
    
@mrk I would go for an interval of the biggest common divisor and counting inside that. In this case you would set up an interval of 1s and count down a number, e.g. from 10 down. Once it reaches 0, switch screens, reset that counter and go for the next number. You could use an array of countdowns for that.
    
By the way, if your screens don’t change over time too much, you could also just load them once and show them one at a time while the others are hidden. This would greatly reduce server traffic and it would make your web page runnable offline after the initial loading.
    
Hmm, I don’t get what you mean (biggest common divisor//array for countdowns) :/ Is it possible to show that in a code example?
– mrk
5 hours ago

原文地址:

https://stackoverflow.com/questions/47750602/how-to-load-a-site-depending-on-hours-and-minutes

添加评论

友情链接:蝴蝶教程