Ajax not always being called

Question

Ok so I have a button 'up' which when pressed starts a countdown from 8 and when it reaches 0 an ajax call to update.php is made which in turn updates an sql table. update.php is working.

 <input type='button' id='countdw' value='Wait 8s'  class='btn btn-primary disabled'>

This is working, just not each time the countdown reaches 0. This bit of code doesn't seem to execute each time

$.ajax({
        url: "update.php",

Here is the code

<script>
                var secsLeft = 8;
                setInterval(function(){
                    secsLeft--;
                    if(secsLeft > 0){
                        $('#countdw').val('Wait ' + secsLeft + 's');
                    } else if(secsLeft == 0){
                        $('#countdw').removeClass('disabled');
                        $('#countdw').val('UP');
                        $('#countdw').attr("onclick","myfunction()");

                    }
                }, 1000);        
            </script>

            <script>
                count=0;
                function myfunction(){
                    if(mycount!=0 && mycount%25==0){

                    }else{
                            var secsLeft = 8;
                            setInterval(function(){
                                secsLeft--;
                                if(secsLeft > 0){
                                    $('#countdw').addClass('disabled');
                                    $('#countdw').val('Wait ' + secsLeft + 's');
                                } else if(secsLeft == 0){
                                    $('#countdw').removeClass('disabled');
                                    $('#countdw').val('UP');
                                    $('#countdw').attr("onclick","myfunction()");

                                    $.ajax({
                                url: "update.php", 
                                data:{'user':'<?php echo $subid ?>','data':'<?php echo $key ?>'},
                                success: function(result){

                                }
                            });

                                }
                            }, 1000);

                    }
                    up();
                }
            </script>

Any help would be greatly appreciated.

Answer 1

First of all, i want you to forgive my english language. I can't really get your preoccupation but when see your code, what is the role of variable mycount and where is it defined? when setInterval() is running with the first script block, secsLeft will always continous to be decreased. So each time secsLeft will be <= 0 you will have instructions in the "else" block which will be executed and maybe it's not the desired result. This can be optimized by stopping the timed function when secsLeft<=0. Then you will have something like that:

 <script>
            var secsLeft = 8;
            var timedDecreaseID = setInterval(function(){
                secsLeft--;
                if(secsLeft > 0){
                    $('#countdw').val('Wait ' + secsLeft + 's');
                } else { //secsLeft <= 0
                    $('#countdw').removeClass('disabled');
                    $('#countdw').val('UP');
                    $('#countdw').attr("onclick","myfunction()");

                    clearInterval( timedDecreaseID );//will stop this timed function
                }
            }, 1000);        
        </script>  

In the second script block there can be a "collision" between the setInterval which is implemented and the previous other in the first script block. This also explain why i recommend to stop the first one after the associated condition is realised. Another remark is that if you make the test secsLeft <=0 you will have an ajax call each time secsLeft will be decrease under value 0, and this will always happen if the considered setInterval call is not stopped. So, unless is the desired result, i think is better to do something like:

<script>
            count=0;
            function myfunction(){
                if(mycount!=0 && mycount%25==0){

                }else{
                        var secsLeft = 8;
                        timedDecreaseID = setInterval(function(){
                            secsLeft--;
                            if(secsLeft > 0){
                                $('#countdw').addClass('disabled');
                                $('#countdw').val('Wait ' + secsLeft + 's');
                            } else {//secsLeft <= 0
                                $('#countdw').removeClass('disabled');
                                $('#countdw').val('UP');
                                $('#countdw').attr("onclick","myfunction()");

                                $.ajax({
                            url: "update.php", 
                            data:{'user':'<?php echo $subid ?>','data':'<?php echo $key ?>'},
                            success: function(result){

                            }
                        });

                        clearInterval( timedDecreaseID );//will stop this timed function
                            }
                        }, 1000);

                }
                up();
            }
        </script>

Answer 2

Less-or-equal

# instead of
#     if(secsLeft == 0){
# test if it's less-or-equal zero
if(secsLeft <= 0){

In JavaScript events sometimes pile up, and then race conditions occur, which seem to be unlikely. In your case it could be that secsLeft is decreased two times, before it's checked for equality.

Was a request sent?

Make sure the AJAX request isn't sent. There are developer tools for every browser, where you can check all out going traffic. Make sure there is no error messages as response to your AJAX request.

Besides that you should add console.log(..) to the success() and error() funtions of $.ajax to see if something is happening behind the curtain.

What's happening afterwards?

You're calling a method up(). Make sure this method doesn't prevent your AJAX call, for example by triggering a redirect.