由于ajax jquery函数，clearTimeout无法正常工作，引导模式事件未处理

Question

I've a ridiculous problem with my javascript setTimeout and jquery ajax function.

I've a webpage who needed to be refreshed every x seconds.

I use a setTimeout who call my ajax function every x seconds.

The user has the opportunity to use a boostrap modal to enter information. What I want is to clear the timeout when the modal is shown and restart the timeout when the user closed.

My problem is on the event “shown.bs.modal” none of the functions are executed, even the alerts so my setTimout is still running while the modal is open.

If the DOM is uploaded while the modal is shown, the modal source code will be deleted and so I'll have a frozen webpage, without scrollbar.

The problem comes from the ajax function . If I change the code of doRefresh to just an alert(); everything works perfectly.

//refresh delay in ms
var delayRefresh=5000;

// stored setTimeout's id
var refresh;

//First call of the ajax function
$(document).ready(function(){
    refresh=window.setTimeout(function(){doRefresh();}, delayRefresh);
});

//code executed when the user open a modal
$('.modal').on('shown.bs.modal', function () {          
     alert(refresh);
    //Stopped the refresh
    clearTimeout(refresh);  
});

//code executed when the user close the modal
$('.modal').on('hidden.bs.modal', function () { 
    alert(refresh);
    //restart of the refresh
    refresh=window.setTimeout(function(){doRefresh();}, delayRefresh);  
    alert(refresh);
});


/* Fonction that run the ajax request to the server */  
var doRefresh = function (){        
    $.ajax({
        type:"PUT",
        url:"<c:url value="/checklist"/>",
        contentType: false,
        async: true,
        processData: false,
        success:function(data){
                // DOM update
                $("#content_needed_to_be_updated").html(data) ;
                //restart of the refresh
                refresh=window.setTimeout(function(){doRefresh();},delayRefresh);

            },
            error:function(xhr){                    
                toastr.error('Le serveur n\'a pas pu être atteint.', 'Erreur !');        
                //restart of the refresh
                refresh=window.setTimeout(function(){doRefresh();}, delayRefresh+20000);
            }
        });             
}; 

New version:

//refresh delay in ms
var delayRefresh=30000;

// stored setTimeout's id
var idSetTimeout;

var refesh=function(){
    idSetTimeout=window.setTimeout(function(){doRefresh();}, delayRefresh);
}; 

//First call of the ajax function
$(document).ready(function(){
    refesh();
});

//code executed when the user open a modal
$('.modal').on('shown.bs.modal', function () {          
     alert(idSetTimeout);
    //Stopped the refresh
    clearTimeout(idSetTimeout); 
});

//code executed when the user close the modal
$('.modal').on('hidden.bs.modal', function () { 
    alert(idSetTimeout);
    //restart of the refresh
    refresh();  
    alert(idSetTimeout);
});


/* Fonction that run the ajax request to the server */  
var doRefresh = function (){        
    $.ajax({
        type:"PUT",
        url:"<c:url value="/checklist"/>",
        contentType: false,
        async: false,
        processData: false,
        success:function(data){
                // DOM update
                $("#content_needed_to_be_updated").html(data) ;
                //restart of the refresh
                refresh();                                      
            },
            error:function(xhr){                    
                toastr.error('Le serveur n\'a pas pu être atteint.', 'Erreur !');        
                //restart of the refresh
                refresh();  
            }
        });             
}; 

Answer 1

You could leave your timeout set, and simply check whether the modal is shown or not before making the ajax call to the server.

var doRefresh = function () {
    if (!$(".modal").data('bs.modal').isShown)
    {
        $.ajax({
            // your code...
        });
    }
}