首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >JQuery未更新更新按钮数值调节

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

Stack Overflow用户
提问于 2021-03-02 14:54:49
回答 1查看 64关注 0票数 0

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

代码语言:javascript
复制
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);
          });
      }
});
EN

回答 1

Stack Overflow用户

回答已采纳

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

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

代码语言:javascript
复制
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
          });
      }
});

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

代码语言:javascript
复制
 $(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
  });
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/66434631

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档