Question

我在代码中有几个var send = function(event) { var pickUpDate = document.getElementById('datepicker').value; var totalStops = document.getElementById('stops').value; var inputData = {"pickUpDate":pickUpDate, "totalStops":totalStops } $.post('http://localhost:8080/jee6/FormTestServlet', inputData, myData, "json"); function myData(data) { } // add return false to prevent the default sumbit return false; };个。我需要根据API请求更新内部的html。它工作正常，但是html没有刷新（例如，如果我通过API得到一个新结果，html保持与第一次迭代相同，但在firebug中我可以读取准备好在页面中注入的新HTML。）

div

Answer 1

更改此

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

到

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

或将$(this)分配给变量并传入setInterval函数

Answer 2

您可以修复它：

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

Ajax：setInterval函数不更新html（但它有效）

2 个答案: