Search code examples
arraysajaxtimeoutcounter

Ajax call output and timeout


Ive build an ajax counter which outputs max 6 digits - e.g. "120398" and repeats the call

function updateNumbers(){
    $.ajax({
    url: totalnumbers.ajaxurl,
    data: {
        action: 'numberstotal'
    },
    success: function (response) {
        var numbers = response.toString(10).replace(/\D/g, '0').split('').map(Number);
        //console.log(numbers);
        var newHTML = [];
        for (var i = 0; i < 6; i++) {
            newHTML.push('<span>' + numbers[i] + '</span>');
        }
        $('.counter').html(newHTML.join(""));
    }
    });
    setTimeout(updateMinutes, 5000);
}

updateNumbers();

this works so far.

Question 1:

Now when there are only 4 digits (1234) I still need an output of total like this

<span>0</span>
<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>

what I get is

<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>undefined</span>
<span>undefined</span>

Question 2:

When theres a total of 200000 I want to quit the setTimeout-Function. But I dont know how to get the response out of the ajax call to check before setting the timeout.

Help would be great. It seems like I am almost there :(


Solution

  • After a little thinking I made it happen:

    function updateNumbers(){
    $.ajax({
    url: totalnumbers.ajaxurl,
    data: {
        action: 'numberstotal'
        },
        success: function (response) {
            if (response < 20000) {
                var stringlength = response.length;
                var numbers = response.toString(10).replace(/\D/g, '0').split('').map(Number);
                var newNumbers = numbers;
                for (var i = stringlength; i < 7; i++) {
                    newNumbers.unshift(0);
                }
                var totalNumbers = $.map(newNumbers, function(num) {
                        return('<span>' + num + '</span>');
                    });
                $('.counter').html(totalNumbers.join(""));   
                setTimeout(updateNumbers, 5000);
                }
            else {
                var numbers = response.toString(10).replace(/\D/g, '0').split('').map(Number);
                var totalNumbers = $.map(numbers, function(num) {
                        return('<span>' + num + '</span>');
                    });
                $('.counter').html(totalNumbers.join(""));
            }
            } 
        });
    }
    updateNumbers();