CODEWITHSUNDEEP
htmljquery
Haider Abbas
Haider Abbas

Reputation: 33

Stop a recursive AJAX call on a button click and start it again on a button click

I am calling ajax after each 5 secs to update my data and I need to stop that call when a button is clicked. My ajax function is:

function get_text(){
    var text = $.ajax({
            type: "POST",
            url: "getIt.php",
            async: false
        }).complete(function(){
            setTimeout(function(){get_text();}, 5000);
        }).responseText;

        $('#editor_Content').html(text);
}

this function is called at

$(document).ready(function(){
   new get_text(); 
}

I need to stop this call when a button is clicked and start this call again when the same button is clicked again. Any suggestions?

My button click code is 

function editit(){ 
    var myVar = document.getElementById("editor_Content").getAttribute("contenteditable"); 
    if(myVar=='true'){         
        document.getElementById("editor_Content").setAttribute("contenteditable", "false"); 
        document.getElementById("editbtn").setAttribute("value","Edit Text"); 
    } else{ 
        document.getElementById("editbtn").setAttribute("value","Done Editing"); 
        document.getElementById("editor_Content").setAttribute("contenteditable", "true"); 
    } 
}

Upvotes: 3

Views: 859

Answers (1)

DiverseAndRemote.com
DiverseAndRemote.com

Reputation: 19888

You need to save the result of setTimeout and use it in a call to the clearTimeout function like so:

function get_text(){
    var text = $.ajax({
        type: "POST",
        url: "getIt.php",
        async: false
    }).complete(function(){
        window.getTextTimeoutId = setTimeout(function(){get_text();}, 5000);
    }).responseText;

    $('#editor_Content').html(text);
}

$(document).ready(function(){
    get_text(); 
} 

function editit(){ 
    var myVar = document.getElementById("editor_Content").getAttribute("contenteditable"); 
    if(myVar=='true'){         
        if(window.getTextTimeoutId){
            window.clearTimeout(window.getTextTimeoutId)
            window.getTextTimeoutId = null;
        }
        document.getElementById("editor_Content").setAttribute("contenteditable", "false"); 
        document.getElementById("editbtn").setAttribute("value","Edit Text"); 
    } else{ 
        document.getElementById("editbtn").setAttribute("value","Done Editing"); 
        document.getElementById("editor_Content").setAttribute("contenteditable", "true"); 
        if(!window.getTextIntervalId) //edited for not to create another call. fixed!
            window.getTextTimeoutId = setTimeout(get_text, 0);
    } 
}

But for your purposes I think setInterval and clearInterval would work better. Here is what your new code would look like:

function get_text(){
    var text = $.ajax({
        type: "POST",
        url: "getIt.php",
        async: false
    }).responseText;

    $('#editor_Content').html(text);
}

$(document).ready(function(){
     window.getTextIntervalId = window.setInterval(get_text, 5000); 
} 

function editit(){ 
    var myVar = document.getElementById("editor_Content").getAttribute("contenteditable"); 
    if(myVar=='true'){         
        if(window.getTextIntervalId){
            window.clearInterval(window.getTextIntervalId)
            window.getTextIntervalId = null;
        }
        document.getElementById("editor_Content").setAttribute("contenteditable", "false"); 
        document.getElementById("editbtn").setAttribute("value","Edit Text"); 
    } else{ 
        document.getElementById("editbtn").setAttribute("value","Done Editing"); 
        document.getElementById("editor_Content").setAttribute("contenteditable", "true");
        if(!window.getTextIntervalId) //edited for not to create another call. fixed!
            window.getTextIntervalId = setInterval(get_text, 5000);
    } 
}

Upvotes: 3

Related Questions