Ajax：setInterval関数はhtmlを更新しません（ただし動作​​します）

Question

コードにはdivが複数あります。 APIリクエストに基づいて、内部のhtmlを更新する必要があります。 htmlは機能しますが、htmlは更新されません（つまり、APIを使用して新しい結果を取得した場合、htmlは最初の反復と同じですが、Firebugでは新しいHTMLをページに挿入する準備ができています）。

setInterval(function(){getGpioState(id_gpio,$(this))}.bind(this), 5000); 

またはあなたが好きそれを修正することができ、変数に$(this)を割り当てるとするsetInterval関数内

Answer 1

変更この

setInterval(function(){getGpioState(id_gpio,$(this))}, 5000); 

：

setInterval((function(_this){ 
    return function(){ 
    getGpioState(id_gpio,$(_this)); 
    }; 
}(this)), 5000); 

問題は、scopeとthisのキーワードがJavaScriptでどのように機能するかに関連しています。

それともあなたも、単純に変数を使用することができます。

$('div.show-gpio-state').each(function(i, obj) { 
    var id_gpio = $(this).data('id-gpio'); 
    var $this = $(this); 
    getGpioState(id_gpio,$this); 
    setInterval(function(){getGpioState(id_gpio,$this)}, 5000); 
}); 

あなたがこの記事を読むことができる問題についての詳細を学ぶために：Understand JavaScript’s “this” With Clarity, and Master It

Answer 2

を渡すために

$('div.show-gpio-state').each(function(i, obj) { 
     var id_gpio = $(this).data('id-gpio'); 
     getGpioState(id_gpio,$(this)); 
     setInterval(function(){getGpioState(id_gpio,$(this))}, 5000); 
    }); 

function getGpioState(id_gpio,box) { 

    $.ajax(
      { url: api_gpio_url+id_gpio, 
       cache:false, 
       success: function (result) { 
        box.html(''); 
        var state = result; 
        var final_state = ''; 
        if ((state==='error') || (state==='')) { 
         final_state = '<span class="text-danger"><i class="fa fa-fw fa-2x fa-exclamation-triangle"></i></span>'; 
        } else { 
         if (state==1) { 
          final_state = '<p class="h2"><i class="fa fa-fire text-success"></i></p>'; 
         } else { 
          final_state = '<p class="h2"><i class="fa fa-remove text-grey"></i></p>'; 
         } 
        } 
       box.html(''); 
       box.html(final_state); 
       // here in console I have right final state for right box 
       console.log(final_state); 
       console.log(box); 

      } 
     }); 

}