无法停止window.setInterval()

时间:2016-01-11 19:22:01

标签: javascript ajax

我似乎无法获得此window.setInterval来停止。

$( document ).ready(function() {
    id = window.setInterval(updateReportStatus, 500);

    function updateReportStatus (){
        var url = "{{url_for('task_results', taskId=taskInfo.ID)}}"; 

        $.ajax({
               type: 'GET',
               url: url,
               success: function(data){
                    console.log('AJAX call is successful.')

                    if (typeof data !== 'undefined' && data !== null && data !== 'waiting'){
                        data = JSON.parse (data)
                        //console.log(data)
                        var numberGaps = data.processedData.numberGaps
                        console.log(numberGaps)
                        var pie = data.processedData.completeness.completenessPie
                        console.log(pie)
                        var seriesData = data.processedData.processedTimeSeriesData
                        $('#dataCompleteness').append('<p>' + numberGaps + '<p>')
                        stop_query(); 
                        }

                    }// End of success function 

                }); //End of Ajax call 

            } //End of Polling function

        });
        function stop_query(){
                console.log('Stopping the following query........')
                console.log(id)
                window.clearInterval(id); 
        }

以下是我所做的更改,似乎有效。从&#39; id&#39;更改了window.setInterval()变量名称。到了myPoller&#39;。还设置变量&#39; myPoller&#39;在stop_query()函数之后为null。

$( document ).ready(function() {
    var myPoller = window.setInterval(updateReportStatus, 5000);

    function updateReportStatus (){
        var  url = "{{url_for('task_results', taskId=taskInfo.ID)}}"; 

    $.ajax({
           type: 'GET',
           url: url,
           success: function(data){
                console.log('AJAX call is successful.')

                if (typeof data !== 'undefined' && data !== null && data !== 'waiting'){
                    data = JSON.parse (data)
                    //console.log(data)
                    var numberGaps = data.processedData.numberGaps
                    console.log(numberGaps)
                    var pie = data.processedData.completeness.completenessPie
                    console.log(pie)
                    var seriesData = data.processedData.processedTimeSeriesData
                    $('#dataCompleteness').append('<p>' + numberGaps + '<p>')
                    stop_query(myPoller); 
                    myPoller = null
                    }

                }// End of success function 

            }); //End of Ajax call 

        } //End of Polling function

    });
    function stop_query(myPollerID){
            console.log('Stopping the following query........')
            console.log(myPollerID)
            window.clearInterval(myPollerID);

        }

2 个答案:

答案 0 :(得分:1)

您的 stop_query 功能无法使用本地声明的变量 id 。您必须将间隔分配给 stop_query 功能可以“看到”的变量。

此代码输出说明一个外部声明的函数canot分配一个局部变量:

//Global Counter Var:
var x = 0;

(function(){
		var counter = document.getElementById("counter");
    var message = document.getElementById("message");
		var localVar = setInterval(incrementX, 700);

		function incrementX(){
    		x++;
        console.log(x);
        counter.innerHTML = x;
        if(x === 10){
        		message.innerHTML = "Uncaught ReferenceError: localVar is not defined"
        		stopInteval();
        }
    }
})();

//this function cant use localVar!
function stopInteval(){
	clearInterval(localVar);
}
#message{
  color: red;
  }
<pre>Counting until 10 is reached...</pre>
<p id="counter"></p>
<pre id="message"></pre>

<强>解决方案: 将局部变量移到函数外部:

//Global Counter Var:
var x = 0;
var localVar

(function(){
		var counter = document.getElementById("counter");
    var message = document.getElementById("message");
		localVar = setInterval(incrementX, 200);

		function incrementX(){
    		x++;
        console.log(x);
        counter.innerHTML = x;
        if(x === 10){
          message.innerHTML ="It worked!";
        		stopInteval();
        }
    }
})();

function stopInteval(){
	clearInterval(localVar);
}
<pre>Counting until 10 is reached...</pre>
<p id="counter"></p>
<pre id="message"></pre>

答案 1 :(得分:0)

首先:使用var关键字在代码中声明所有新变量 其次,在使用$( document ).ready(function() {库时将相关逻辑块放在JQuery内:

$( document ).ready(function() {
    var IntId = window.setInterval(updateReportStatus, 500);

    function updateReportStatus (){
        var url = "{{url_for('task_results', taskId=taskInfo.ID)}}"; 

        $.ajax({
               type: 'GET',
               url: url,
               success: function(response){
                    console.log('AJAX call is successful.')

                    if (typeof data !== 'undefined' && data !== null && data !== 'waiting'){
                        var data = JSON.parse(response);
                        //console.log(data)
                        var numberGaps = data.processedData.numberGaps;
                        console.log(numberGaps)
                        var pie = data.processedData.completeness.completenessPie;
                        console.log(pie)
                        var seriesData = data.processedData.processedTimeSeriesData;
                        $('#dataCompleteness').append('<p>' + numberGaps + '<p>');
                        stop_query(); 
                    }

                }// End of success function 

         }); //End of Ajax call 

    } //End of Polling function
    function stop_query(){
            console.log('Stopping the following query........')
            console.log(IntId)
            window.clearInterval(IntId); 
    }

});