3

我使用foundation4 orbit插件来显示图片库。

它目前的工作方式是：

（1）使用AJAX动态加载图片列表，AJAX调用轮询周期为1秒

(2) 通过 $(document).foundation() 在 AJAX 成功回调中使用上述结果更新滑块，这将正确显示轨道滑块

问题是：

AJAX 回调将多次调用 $(document).foundation()，每次它都会创建一个新滑块并与现有滑块重叠。我应该怎么做才能更新当前的轨道滑块，而不是创建一个新的？

测试 

<script type="text/javascript" charset="utf-8"> 
Array.prototype.contains = function(obj) {
    var i = this.length;
    while (i--) {
        if (this[i] == obj) {
            return true;
        }
    }
    return false;
}

function getParameterByName(name){
      name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
      var regexS = "[\\?&]" + name + "=([^&#]*)";
      var regex = new RegExp(regexS);
      var results = regex.exec(window.location.search);
      if(results == null)
        return "";
      else
        return decodeURIComponent(results[1].replace(/\+/g, " "));
}

var images = [];

function addmsg(type, msg){
    var updated = false;
    for (var i in msg){     
        if (!images.contains(msg[i])){
            $("#messages").prepend(
                "<li><img src='"+msg[i]+"'"+"/>"+"<div class='orbit-caption'>...</div>"
            );
            images.push(msg[i]);
            updated = true;
        }
    }
    return updated;
}

var url = 'get_latest_images.php';

function waitForMsg(){
    /* This requests the url "msgsrv.php"
    When it complete (or errors)*/
    $.ajax({
        type: "GET",
        url: url+'?username='+getParameterByName('username'),
        dataType: 'json',
        async: true, /* If set to non-async, browser shows page as "Loading.."*/
        cache: false,
        timeout:50000, /* Timeout in ms */

        success: function(data){ /* called when request to barge.php completes */
            //alert(data);
            var updated = addmsg("new", data); /* Add response to a .msg div (with the "new" class)*/
            if (updated){
                $(document).foundation();
            }
            setTimeout(
                waitForMsg, /* Request next message */
                1000 /* ..after 1 seconds */
            );
        },
        error: function(XMLHttpRequest, textStatus, errorThrown){
            addmsg("error", textStatus + " (" + errorThrown + ")");
            setTimeout(
                waitForMsg, /* Try again after.. */
                15000); /* milliseconds (15seconds) */
        }
    });
};

$(document).ready(function(){
    waitForMsg(); /* Start the inital request */            
});
</script>



<script src="./js/foundation.min.js"></script>
<script src="./js/foundation.orbit.js"></script>

4

0 回答 0