问JQuery未更新更新按钮数值调节
EN

Stack Overflow用户

提问于 2021-03-02 06:54:49

回答 1查看 64关注 0票数 0

在下面的JQuery中，对setinterval进行Ajax调用以更新屏幕值，在超时后清除该间隔并停止更新。这部分起作用了。但是，当用户单击update按钮时，将进行一定数量的Ajax更新(10)。在开始时，通过添加类将微调器设置为旋转，在所有更新之后，删除微调器类以使微调器停止。但是，微调器甚至从不启动-所有其他屏幕更新都按预期工作。我做错了什么？

jQuery(document).ready(function($) {
      // set an interval. The callback gets executed every interval
      var setInterval1_ID = setInterval(triggerAjax, 10000); // 10 sec updates
      var timeout1_ID = setTimeout(stopSetInterval1, 100000); // this is 100 seconds for 10 updates

      $(document).on("click", "#refresh-button", function() {
        $("#refresh-button").addClass("fa-spin");
        var count = 0;
        while (count <= 9) {
          count = count + 1;
          triggerAjax();
        }
        $("#refresh-button").removeClass("fa-spin");
      });

      function stopSetInterval1() {
        // clear the interval trigger explicitly
        clearInterval(setInterval1_ID);

        // stop spinning of update wheel
        $("#refresh-button").removeClass("fa-spin");
        // also clear the timeout
        clearTimeout(timeout1_ID);
      }

      function triggerAjax() {
        $.post(my_ajax_obj.ajax_url, { //POST request
            _ajax_nonce: my_ajax_obj.nonce, //nonce extracted and sent
            action: "get_studer_readings" // hook added for action wp_ajax_get_studer_readings in php file
          },
          function(data) { // data is JSON data sent back by server in response, wp_send_json($somevariable)
            // update the page with new readings. Lets just log the value sto see if we are getting good data
            // console.log('data: ', data);
            // console.log('battery html', $('#power-battery').html());

            //Change Inverter output power value using Ajax delivered object data
            $('#power-load').html(data.pout_inverter_ac_kw + ' kW');

            // change the arrow class for Inverter Pout to Home using Ajax update
            $('#power-arrow-load').removeClass().addClass(data.inverter_pout_arrow_class);

            // Solar Power related values Ajax update
            //Change Solar output power value using Ajax delivered object data
            $('#power-solar').html(Math.round(data.psolar_kw, 2) + ' kW<br>' + '<font color="#D0D0D0">' +
              data.solar_pv_adc + 'A');
            // todo need to add the SOlar-PB current at battery interface
            // update the arrow based on ajax
            $('#power-arrow-solar').removeClass().addClass(data.solar_arrow_class);

            // Change the Battery values based on Ajax update
            $('#power-arrow-battery').removeClass().addClass(data.battery_charge_arrow_class);
            //Change Inverter output power value using Ajax delivered object data
            $('#power-battery').html(data.pbattery_kw + ' kW<br>' + '<font color="#D0D0D0">' +
              data.battery_voltage_vdc + 'V<br>' +
              data.battery_charge_adc + 'A');

            //Change Grid AC in power and arrow calss based on Ajax updates
            //Change Inverter output power value using Ajax delivered object data
            $('#ppower-grid-genset').html(data.grid_pin_ac_kw + ' kW<br>' + '<font color="#D0D0D0">' +
              data.grid_input_vac + 'V<br>' +
              data.grid_input_aac + 'A');
            // change the arrow class for Inverter Pout to Home using Ajax update
            $('#power-arrow-grid-genset').removeClass().addClass(data.grid_input_arrow_class);
          });
      }
});

javascript

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-03-02 08:15:20

$.post是异步的，所以它会在毫秒内添加或删除类，你可以使它同步，但不建议这样做，因为它会使你的浏览器冻结/无响应，将$("#refresh-button").removeClass("fa-spin");放在post回调中

var count = 0; // <== make the variable global
jQuery(document).ready(function($) {
      .......
      // update the following
      $(document).on("click", "#refresh-button", function() {
        $("#refresh-button").addClass("fa-spin");
        count = 0;
        var thisCount = 0
        while (thisCount <= 9) {
          thisCount++;
          triggerAjax();
        }
      });

      function triggerAjax() {
        $.post(my_ajax_obj.ajax_url, { //POST request
          .......
          function(data) {
            ...........
            $('#power-arrow-grid-genset').removeClass().addClass(data.grid_input_arrow_class);
            // add this block
            count++; // <== update count
            if(count == 9){
                $("#refresh-button").removeClass("fa-spin"); // <== remove it here
            }
            // end block
          });
      }
});

上面的代码将使你并行运行后串行化

 $(document).on("click", "#refresh-button", function() {
    $("#refresh-button").addClass("fa-spin");
    count = 0;
    triggerAjax();
  });

function triggerAjax() {
$.post(my_ajax_obj.ajax_url, { //POST request
  .......
  function(data) {
    ...........
    $('#power-arrow-grid-genset').removeClass().addClass(data.grid_input_arrow_class);
    // add this block
    count++;
    if(count == 9){
        $("#refresh-button").removeClass("fa-spin");
    }
    else{
        triggerAjax();
    }
    // end block
  });
}