Ajax call sometimes doesnt print content - php

Question

I made an AJAX filter for woocommerce, which filters products based on attributes.
The query works fine, and it always prints the right products and content. That it actually prints something.
Every once i a while it will run but not add any html. If i log the data received it's clearly there. Sometimes the html() function just doesnt do anything.
It seems the error occurs more often if i doubleclick the filter button before it's done with its previous operation. I've tried adding a data attribute to check if the ajax is done filtering, to stop any calls from happening before the first is done. It doesn't seem to really work though.
The AJAX function:
function getPosts(page){
var filter = $('#filter');
if(filter.length < 1){
return false;
}
if(filter.data('loading') == true){
return false;
}
var buttonText = $('#filter #product-ajax-submit').text();
$.ajax({
url:filter.attr('action'),
data:filter.serialize() + '&page=' + page, // form data
type:filter.attr('method'), // POST
dataType: 'json',
beforeSend:function(xhr){
filter.attr('data-loading', true);
filter.find('#product-ajax-submit').text('Filtrerer...'); // changing the button label
$('#bbh-ajax-loader').fadeIn(200, function(){
var productsHeight = $('ul.products').outerHeight();
$('ul.products').parent().css('height', productsHeight);
$('ul.products').html(''); // delete current content
$('.woocommerce-pagination').html('');
});
},
success:function(data){
$('ul.products').empty().append(data[0]);
filter.find('#product-ajax-submit').text(buttonText); // changing the button label back
$('.woocommerce-pagination').html(data[1]);
$('ul.products').parent().css('height', 'auto');
$('#bbh-ajax-loader').fadeOut(300);
filter.find('select, button').prop( "disabled", false );
},
error:function(data){
$('ul.products').html(data.responseText);
$('ul.products').parent().css('height', 'auto');
$('#bbh-ajax-loader').fadeOut(300);
// insert data
filter.find('#product-ajax-submit').text(buttonText);
},
complete:function(data){
filter.attr('data-loading', false);
}
});
}
$('#filter[data-live-sort="false"]').on('submit', function(){
getPosts(1);
return false;
});
As I said, if I log the returned data, the markup is always correct. Both on success and error. I suspect maybe clearing the html from ul.products on beforeSend could create problems with the success data being displayed if multiple calls are made simultaniously.