ユーザーが新しい画像をアップロードしたときにのみ、新しい画像でdivを更新

Question

私は2つの別々のページを持っています：ユーザーが新しい画像をアップロードする場所、

スクリプトはtxtファイル内のファイル名を見ていると、最初のファイル名をフェッチしている（file_name2.jpg | file_name1.jpg）

ここではスクリプトです：

$(function(){ 
    var GALLERY = { 
     container: "#gallery", 
     url: "getImages.txt", 
     delay: 10000, 
     load: function(){ 
      var _gallery = this; 
      var number = 1 + Math.floor(Math.random() * 9999999999); 
      $.ajax({ 
       type: "get", 
       url: this.url + '?rand=' + number, 
       beforeSend: function(){ 
        $(_gallery.container).find('img').remove(); 
       }, 
       success: function(data){ 
        var images = data.split('|', 1); 
        $.each(images, function(){ 
         _gallery.display(this); 
        }); 
       }, 
       complete: function(){ 
        setTimeout(function(){ 
         _gallery.load(); 
        }, _gallery.delay); 
       } 
      }); 
     }, 
     display: function(image_url){ 
      $('<img />').attr('src', 'images/' + image_url).load(function(){ 
       $(this); 
      }).prependTo(this.container); 
     } 
    } 
    GALLERY.load(); 
}); 

問題がされ：新しい画像がアップロードされていなくても、スクリプトは常に画像を実行して置き換えます。

イメージは、新しいイメージがアップロードされたときにのみリフレッシュする必要があります。

どうすればこの問題を解決できますか？

Answer 1

GALLERY.lastdataのように結果データを保存する必要がある場合、setTimeoutは別のデータを要求し、新しいデータが更新されないかどうかを確認します。

$(function(){ 
    var GALLERY = { 
     lastdata : "", 
     container: "#gallery", 
     url: "getImages.txt", 
     delay: 10000, 
     load: function(){ 
      var _gallery = this; 
      var number = 1 + Math.floor(Math.random() * 9999999999); 
      $.ajax({ 
       type: "get", 
       url: this.url + '?rand=' + number, 
       success: function(data){ 
         //detect new images 
         if(_gallery.lastdata != data){ 
       var images = data.split('|', 1); 
       $.each(images, function(){ 
          _gallery.lastdata = data; 
         _gallery.display(this); 
       }); 
         } 

       }, 
       complete: function(data){ 
        setTimeout(function(){ 
         _gallery.load(); 
        }, _gallery.delay); 
       } 
      }); 
     }, 
     display: function(image_url){ 
      $('<img />').attr('src', 'images/' + image_url).load(function(){ 
       $(this); 
      }).prependTo(this.container); 
     } 
    } 
    GALLERY.load(); 
}); 

Answer 2

成功または表示機能では、現在表示されている画像ファイル名に対して受信した画像ファイル名を確認するコードを追加し、異なる場合にのみ更新します。