2016-04-11 4 views
1

У меня есть следующий AJAX вызов к API,Как остановить автоматический вызов AJAX?

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://code.jquery.com/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"> 

    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 

    Auto-ON 
    <input id="inp" type="checkbox" data-toggle="toggle" /> 

    <div id="out"></div> 


    <script> 

    $('#inp').change(function(){ 
    if (this.checked) { 

     setInterval(function(){ 
     $.ajax({ 
       url: 'http://dev.markitondemand.com/MODApis/Api/v2/Quote/jsonp?symbol=AAPL', 
       dataType: 'jsonp', 
       success: function(results) { 
       $("#out").append(results.Status + "<br />"); 
       } 
     }); 
    },5000); 


    } 
    }); 

    </script> 


</body> 
</html> 

Я хочу, чтобы вызов AJAX на каждые 5 секунд, если флажок включен. Вызов AJAX должен прекратиться, если флажок выключен. Что мне здесь не хватает?

Вот ссылка на то, что у меня до сих пор - http://jsbin.com/quqazofesu/edit?html,output

ответ

3

Вы должны вызвать clearInterval когда this.checked является ложным. Попробуйте следующее:

var interval; 

$('#inp').change(function() { 
    if (this.checked) { 
     interval = setInterval(function(){ 
      $.ajax({ 
       url: 'http://dev.markitondemand.com/MODApis/Api/v2/Quote/jsonp?symbol=AAPL', 
       dataType: 'jsonp', 
       success: function(results) { 
        $("#out").append(results.Status + "<br />"); 
       } 
      }); 
     }, 5000); 
    } else { 
     clearInterval(interval); 
    } 
}); 
3

Я не рекомендую использовать интервал с Ajax.

Попробуйте это:

var getCheck; 
function getIt() { 
    if (!getCheck) return; 
    $.ajax({ 
    url: '...', 
    dataType: 'jsonp', 
    success: function(results) { 
     $("#out").append(results.Status + "<br />"); 
     if (getCheck) { 
     setTimeout(getIt,5000); 
     } 
    } 
    }); 
} 

$(function() { 
    $('#inp').on("change",function(){ 
    getCheck = this.checked; 
    if (getCheck) getIt(); 
    }); 
}); 
Смежные вопросы