Ajax：setInterval函數不更新HTML（但它的工作原理）

-1

我有幾個div代碼。我需要根據API請求更新裏面的html。它的工作原理，但HTML不刷新（即如果我通過API獲得一個新的結果，HTML保持與第一次迭代相同，但在螢火蟲中，我可以閱讀新的HTML準備注入頁面）。Ajax：setInterval函數不更新HTML（但它的工作原理）

$('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); 

      } 
     }); 

}

來源

2016-11-30 sineverba

你爲什麼失敗在你成功的回調測試？爲什麼不只是接受結果並將其注入應該去的地方並設置第二個錯誤回調？ –

[This「關鍵字是如何工作的？]（http://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work） –

更改此

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

到

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

或分配$(this)變量，並通過setInterval函數裏面

來源

2016-11-30 19:04:37 maheshiv

可能的原因是作品的功能範圍'this'，因爲在'setInterval'裏面定義了一個新的函數，它有自己的作用域。因此，'this'將引用'setInterval'函數而不是jQuery'each'函數 – empiric

您可以修復它想：

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

此問題與關鍵字如何在JavaScript中工作scope和this有關。

或者你可以甚至乾脆用一個變量：

$('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

來源

2016-11-30 19:08:52

Ajax：setInterval函數不更新HTML（但它的工作原理）

回答

相關問題