iDangerous Swiper消失，结果集更大（SQL Azure连接）

Question

I'm having a weird issue with the iDangerous swiper on a PHP page... I'm currently making some updates on a touchscreen kiosk that my company uses (the biggest change being the migration from a MySQL database to a SQL Azure cloud db). It's used right now to load plain text data from SQL into individual swiper slides from a relatively small db. There are different selectable categories with varying result set sizes, and smaller ones seem to work just fine, but when larger categories are selected, there seems to be some sort of timing issue or something and the entire swiper container either disappears or just totally fails to load. The largest result set we have is about 75 records or so, which doesn't take really any time at all to actually load from a straight query, so I don't know what's going on. Currently, the iDangerous swiper timeout is set to 1000ms, and if I increase that number to like 5000ms, it fixes the issue. The problem is, that really sucks on the user end to have to wait 5 seconds each time you select a different category just to load basic text results. Any suggestions for ways that we can do to fix this apart from limiting the result set (would defeat the purpose, so this isn't really an option) or making the timeout unusably long? I didn't have this problem when querying the original database (which was running on localhost at the time), so I'm guessing it might have something to do with the SQL Azure connection to PHP?

function getInventors(cat,text) {
var xmlhttp;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("content").innerHTML = xmlhttp.responseText;
    }
}

xmlhttp.open("GET", "getBrowse.php?CAT="+cat+"&TEXT="+text, true);
xmlhttp.send();

setTimeout(function() {
var mySwiper2 = new Swiper('.swiper-container',{
centeredSlides: true,
autoplay: 7000,
slidesPerView: 'auto',
watchActiveIndex: true,
onTouchMove: function(swiper){
mySwiper2.startAutoplay();
}
}) }, 1000 /*changing this to a much higher number fixes it)*/;
}

Thanks in advance for your advice!

Answer 1

I figured it out, the swiper was being initialized in the wrong place. It should have been initialized inside of the Ajax function itself instead of outside like this.

function getInventors(cat,text) {
var xmlhttp;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("content").innerHTML = xmlhttp.responseText;

var mySwiper2 = new Swiper('.swiper-container',{
    centeredSlides: true,
    autoplay: 7000,
    slidesPerView: 'auto',
    watchActiveIndex: true,
    onTouchMove: function(swiper){
        mySwiper2.startAutoplay();
    }
});

}
}

It works now :)