каждый новый ajax звонок занимает больше времени, чем раньше

Question

Я работаю над данными поиска в таблице, где я нажимаю кнопку поиска и получаю таблицу с данными, которые работают нормально, единственная проблема в том, что каждый новый поиск занимает больше времени, чем раньше, и пока он загружается, я не могу выполнить любое действие javascript на странице. Позвольте мне объяснить вам картинки

На первом изображении вы замечаете красные стрелки по запросу, переводу ресурсов и времени со стрелкой дельта.

Теперь после нескольких поисков увеличивается количество запросов, ресурсов и время загрузки.

См. Второе изображение

Очень быстро приводятся таблица и данные, но проблема в том, что я не могу выполнить Функциональность на основе javascript на странице, в то время как что-то происходит за сценой, как на рисунке 2. Я не могу выбрать весь поиск по вводу и т. Д. c.

Есть ли способ удалить или очистить все перед новый ajax вызов?

Мой код

$ (документ) .ready (function () {

$("#searchDataViewBtn").on("click", function(e)
{
    e.preventDefault();     

    var form = $(this).parents('form');
    var formId = $(form).attr('id');
    var url = $(form).attr('action');
    var formData = $(form).serialize();

        $("#ajaxLoaderDiv").fadeIn();
        ajaxFormDataView(url, formData, form);

});


function ajaxFormDataView(url, data, form){

$.ajax({
    url: url,
    type: "post",
    async: true,
    data: {
        "data": data
    },
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    cache: false,
    success: function(result){

            $(form)[0].reset();
            $("#ajaxLoaderDiv").fadeOut();
            $("#tag_container").html("");               
            $("#tag_container").html(result);
       }
     });
   }

});