Wait for something to stop to trigger function

Question

I'm using a date picker I created with the sly tool darsa.in and everything is perfect, except that if the user changes the days too fast JavaScript does not trigger the correct date for the function.

Is there a way for doing:

if (datepicker not active for x seconds)

Or is there a way to create a variable and trigger the function only if that variable does not change during x time? I need to give some time to JS so it does not trigger the function until the user is on the date he targets.

Some code follows below.

When the day of the day picker changes, I call loadDateMatches() which loads all the matches into the HTML. But if you change, for example, very quickly between day 1 and day 5, it may stop loading the matches on day number 3.

I'm looking for a way to not trigger the function loadDateMatches() until there has been some time without changing the date.

days.on('active', function (eventName) {
    activeDate= this.rel.activeItem;
    var logDate = new Date(d.getFullYear(), 0, activeDate + first + 1);
    var startTime = new Date(logDate.getFullYear(), logDate.getMonth(), logDate.getDate(), 0, 0, 0);
    DayBarConditions.startTime = startTime.getTime()/1000;
    var endTime = new Date(logDate.getFullYear(), logDate.getMonth(), logDate.getDate(), 23, 59, 59);
    DayBarConditions.endTime = endTime.getTime()/1000;
    if (typeof loadDateMatches == 'function') {
        loadDateMatches();
    }
});

Can you add some code so people can see what you are trying to do? — httpNick, Sep 14 '16 at 16:39
I added it but anyway I know that is hard to undertand what I'm meening. My English is not perfect at all sorry — Hector Landete, Sep 14 '16 at 17:01
Try the On select function that comes with datepicker -- http://api.jqueryui.com/datepicker/#option-onSelect -- you combine with on close function. With these 2 function you could stop start other functions from executing — Tasos, Sep 14 '16 at 17:23
Perhaps call the function after a delay (using `setTimeout`), and have it first check if the day picker remains set to the same value as before? — Larkeith, Sep 15 '16 at 12:18

score 0 · Answer 1 · answered Sep 15 '16 at 12:34

Try having the date picker call a function on a delay that first checks whether the set day is the same as when it was changed, then loads the info if so. I believe the below code should be functional, however it is untested.

days.on('active', function (eventName) {
    activeDate= this.rel.activeItem;

    // We have to put this in a separate function, so that it evaluates activeDate
    // when the date picker is changed, not when activateDelayed is called
    (function(activeDate) {
        //Activate the function after .5 seconds if date remains unchanged
        window.setTimeout(activateDelayed, 500, activeDate);
    })(activeDate);
};
function activateDelayed (oldDate) {
    activeDate = days.rel.activeItem;
    if (oldDate == activeDate) {
        var logDate = new Date(d.getFullYear(), 0, activeDate + first + 1);
        var startTime = new Date(logDate.getFullYear(), logDate.getMonth(), logDate.getDate(), 0, 0, 0);
        DayBarConditions.startTime = startTime.getTime()/1000;
        var endTime = new Date(logDate.getFullYear(), logDate.getMonth(), logDate.getDate(), 23, 59, 59);
        DayBarConditions.endTime = endTime.getTime()/1000;
        if (typeof loadDateMatches == 'function') {
            loadDateMatches();
        }
    }
});

score 0 · Answer 2 · answered Sep 15 '16 at 13:18

You could use this code, which keeps track of the number of requests you have for executing loadDateMatches. When it is the first one, the function is executed immediately, but the request counter is not decreased until also the cool-down period has passed. Only then is the counter decreased. While that counter is 1, another request can be added, but it will only lead to an execution when the first cool-down period has expired. Any more requests during that cool-down period will not change anything -- at the most one request will be pending for execution after the cool-down:

var requests = 0;

days.on('active', function (eventName) {
    // ... your existing code, setting DayBarConditions properties, comes here.
    // ...
    if (typeof loadDateMatches == 'function') {
        // Keep track of number of requests            
        if (requests < 2) requests++;
        // Ignore this when there is currently a cool-down ongoing, and
        // another execution is already pending:
        if (requests == 2) return;
        (function loop() {
            loadDateMatches();
            setTimeout(function () {
                // Cool down has passed: repeat when new request is pending
                if (--requests) loop();
            }, 500);
        })();
    }
});

So, this code will not delay the very first request, but introduce a cool-down period during which any further requests are joined into one, and which will only execute when that cool-down period has expired.

But there may be better solutions depending on which code you have running in loadDateMatches.

Wait for something to stop to trigger function

2 Answers2