delay for not running other lines of code

Question

in this code i want to when div with .ch1 class changed background to answer_box_small_orange.png other bottom js lines code don't run and no ajax request sends until 3 seconds and i used

window.setTimeout(function () {}, 3000)

but it doesnt work correctly

here first of all i request and get data and it is ok

$.ajax({
    type:'post',
    url:'http://207.154.251.233:8039/app.php/question/get',
    data:JSON.stringify({apikey:'jwebdpqodp9fgkwjebfkdpqihdqlwkndqp'}),
    success:(function (response) {
        var x = response;
        $("#question").text(x.result.question);
        $(".op1").text(x.result.options["1"]);
    })
});

i inserted ajax code and some other codes in function because i want to run it every 60 seconds

function myInterval () {
    $(".ch1").css('background-image','url(image/answer_box_small.png)');
    var clock;
    $(document).ready(function() {
        clock = new FlipClock($('.clock'), 60, {
            clockFace: 'Counter',
            autoStart: true,
            countdown: true,
            callbacks: {
                stop: function() {
                    $('#loading').fadeIn('5000');
                    $.ajax({
                        type:'post',
                        url:'http://79.175.166.98/',
                        data:JSON.stringify({apikey:'jwebdpqodp9fgkwjebfkdpqihdqlwkndqp'}),
                        success:(function (response) {
                            $('#loading').fadeOut('slow');
                            var x = response;
                            $("#question").text(x.result.question);
                            $(".op1").text(x.result.options["1"]);
                            var answer = x.result.answer;
                            if(answer == 1){
                                $(".ch1").css('background-image','url(image/answer_box_small_orange.png)');
                            }
                           window.setTimeout(function () {}, 3000);
                        })
                    });
                }
            }
        });
    });
}
myInterval();
window.setInterval(function(){
    myInterval();
}, 60000);

Answer 1

Based on what you told me, my interpretation is that you have a setTimeout() function and a setInterval() function. The setTimeout() runs at the beginning and will wait for 3 seconds. Then call an ajax function to create new requests every 6 seconds. Your problem seems to be that your first setTimeout() is re-run after you create your first AJAX request, but you want it to stop.

Taken from W3

setTimeout Return Value: A Number, representing the ID value of the timer that is set. Use this value with the clearTimeout() method to cancel the timer.

Knowing this, we can essentially cancel a setTimout() function. In your case, the first setTimeout() .

Consider this,

var firstIntervalID = setTimeout(function() {
    $.ajax() {
    // First AJAX ran after three seconds.
    }
}, 3000);

clearTimeout(firstIntervalID);

// Your code resumes to set an interval every 60 seconds without having to worry about the three seconds set before
myInterval();
var secondIntervalID = setInterval(function(){
    myInterval();
}, 60000);

Essentially, you cancel the setTimeout() when you don't need it anymore. Your application for it can be different than what I wrote, but the main idea is the same. Cancel/Clear the setTimeout() with the ID that is returned on setTimeout() with clearTimeout() .