3

データを更新するために 5 秒ごとに ajax を呼び出しており、ボタンがクリックされたときにその呼び出しを停止する必要があります。私のajax関数は次のとおりです。

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

この関数はで呼び出されます

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

ボタンがクリックされたときにこの呼び出しを停止し、同じボタンが再度クリックされたときにこの呼び出しを再開する必要があります。助言がありますか？

私のボタンクリックコードは

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

1 に答える 1

3

次のように、結果を保存して関数setTimeoutの呼び出しで使用する必要があります。clearTimeout

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

しかし、あなたの目的のためには、よりうまくいくsetIntervalと思います。clearInterval新しいコードは次のようになります。

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);
    } 
}
于 2012-12-13T18:01:24.870 に答える