由于ajax jquery函数，clearTimeout无法正常工作，引导模式事件未处理 [英] clearTimeout doesn't work due to ajax jquery function, bootstrap modal event not handled

问题描述

我的javascript setTimeout 和 jquery ajax 函数出现了一个荒谬的问题.

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

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

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

我使用setTimeout，每隔x秒调用一次我的ajax函数.

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

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

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.

我的问题出在"shown.bs.modal"事件上，没有任何功能执行，甚至没有警报，因此在模式打开时我的setTimout仍在运行.

如果在显示模态时上传了DOM，则模态源代码将被删除，因此我将拥有一个冻结的网页，没有滚动条.

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.

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

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

新版本:

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

推荐答案

您可以保留超时设置，并在对服务器进行ajax调用之前简单地检查是否显示了模式.

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

这篇关于由于ajax jquery函数，clearTimeout无法正常工作，引导模式事件未处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！