由于 ajax jquery 函数，bootstrap 模态事件未处理，clearTimeout 不起作用

Question

我的 javascript setTimeout 和 jquery ajax 有一个荒谬的问题功能。

我有一个网页需要每 x 秒刷新一次。

我使用 setTimeout，它每隔 x 秒调用我的 ajax 函数。

用户有机会使用 boostrap 模式输入信息。我想要的是在显示模式时清除超时并在用户关闭时重新启动超时。

我的问题是事件“shown.bs.modal” none 的功能被执行，甚至是警报所以我的 setTimout 仍然是运行而模态已开放。

如果在显示模态时上传 DOM，模态源代码将被删除，所以我的网页会冻结，没有滚动条。

问题来自ajax函数。如果我将 doRefresh 的代码更改为 alert();一切正常。

//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);
            }
        });             
};

新版本：

//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

您可以保留超时设置，只需在 ajax 调用服务器之前检查模式是否显示。

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

由于 ajax jquery 函数，bootstrap 模态事件未处理，clearTimeout 不起作用

clearTimeout doesn't work due to ajax jquery function, bootstrap modal event not handled

javascript

ajax

jquery

settimeout

twitter-bootstrap