javascript - AJAX を使用して基礎軌道スライダーを動的に更新する方法

Question

画像ギャラリーを表示するには、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>