使用SetTimeout javascript重复Ajax调用,意外执行

时间:2017-12-01 17:26:08

标签: javascript jquery ajax

我在页面加载时动态创建的html表中的用户列表。每行都有一个内联按钮,每个按钮都有onclick =" functionName(userId)",调用以下函数:点击显示引导模型弹出,然后开始调用ajax。问题是在用户关闭模型后停止ajax调用,如果用户单击另一行/用户则传递当前userId。出于某种原因,有时ajax会停止,有时候也不会。之前的userId也被保存在某个地方,这会在给定的时间间隔内产生双重或三重呼叫。感谢您的见解。 //从传递userId的每一行调用此函数:

var timer = null;
function RTLS(id) {
     $('#RTLSModal').modal('show');
    window.clearTimeout(timer);  

    $('#RTLSModal').on('hidden.bs.modal',
        function() {
            window.clearTimeout(timer);
            timer = 0;
            $('#RTLSModal .modal-body').html("");
            $('#RTLSModal').data('bs.modal', null);
        });
    $('#RTLSModal').on('shown.bs.modal',
        function () {
            GetRealTimeScans(id);     

        });
}

function GetRealTimeScans(id) {
    var html = '';
    $.ajax({
        url: '/api/v1/computers/GetRealTimeKeys?computerId=' + id,
        typr: "GET",

        contentType: "application/json;charset=UTF-8",
        dataType: "json",
        success: function (scans) {
            if (scans.length > 0) {
                $.each(scans,
                    function (index, value) {

                        //create html

                    });

                $('#RTLSModal .modal-body').html(html);
            } else {
                html += '<div class=""><h3 style="text-align: center;">No one around</h3></div>';
                $('#RTLSModal .modal-body').html(html);
            }
        },
        complete: function () {
            timer = setTimeout('GetRealTimeScans('+id+')', 10000);
        }
    });
}

1 个答案:

答案 0 :(得分:1)

因此中止Ajax调用以便停止

var timer = null;
var ajaxCall;

function cleanUp () {
  if (timer) window.clearTimeout(timer);
  if (ajaxCall) ajaxCall.abort()
}

当你拨打电话时

cleanUp()
ajaxCall = $.ajax({})
              .done( function () {
                ajaxCall = null
                timer = window.setTimeout(function(){}, 10000)
              });

当您将事件绑定到模态时,您需要删除以前的事件处理程序。

$('#RTLSModal')
  .off('hidden.bs.modal shown.bs.modal')
  .on('hidden.bs.modal', function() {})
  .on('shown.bs.modal', function() {});