javascript 方法执行两次 - bootstrap-slider

Posted 2023-03-13

【中文标题】javascript 方法执行两次 - bootstrap-slider

【英文标题】：javascript method executing twice - bootstrap-slider

【发布时间】：2016-03-11 15:39:28

【问题描述】：

我有 n 个动态生成的滑块，每个滑块都有给定的 DOM id slidern。 因为我不知道我将拥有多少个滑块，所以我已将我的 on slideStop 事件附加到类，然后使用 $(this) 获取 id，并执行与该滑块相关的任何操作。

$(".slider").on("slideStop", function(slideEvt) 

    var rowoffset = $(this).attr("id").substring(6);
    $("#percentage" + rowoffset).text(slideEvt.value);
    updateNumbers(rowoffset);

);

除了脚本两次执行updateNumbers() 方法外，一切都按计划进行。

正如您在此处看到的，我的postdata 与每个响应一起被记录到控制台两次，一次具有正确的值，第二次调用具有未定义的值。

很明显，第一个响应是对第二个调用的响应。

为什么我的方法会触发两次？是滑块库还是 jquery 的问题？ 即使失败的调用总是第二次执行，为什么对失败的调用的响应会首先返回？

这里是 updateNumbers 方法，它当然不会调用自己。

function updateNumbers(rowoffset)

  //get variables from DOM element values

  var percentage = $("#slider" + rowoffset).val();
  var group = $("#rrgroup").val();
  var rrclass = $("#rrclass").val();
  var category = $("#rrcategory").val();
  var subcategory = $("#subcategory" + rowoffset).val();
  var period = $("#rrperiod").val();
  var year = $("#rryear").val();
  var yearmonth = $("#rryearmonth").val();
  var rangesize = $("#rangesize" + rowoffset).text();

  var storesstring = $("#rrstores").val();
  if(storesstring == "")

     storesarray = [];

   else 

  var storesarray = storesstring.split(",");

  

  var postdata = percentage: percentage,
                  group: group,
                  class: rrclass,
                  category: category,
                  subcategory: subcategory,
                  period: period,
                  year: year,
                  yearmonth: yearmonth,
                  stores: storesarray,
                  rangesize: rangesize;

                  console.log(postdata);

         $.ajax(
          url: "ajaxrangemix.php",
          type: "post",
          dataType: 'json',
          data: postdata,
          success: function (response) 

              console.log(response);

              $("#dropskus" + rowoffset).text(response.skus);
              $("#keepsales" + rowoffset).text(response.sales);

              ,
          error: function(jqXHR, textStatus, errorThrown) 

              console.log(textStatus, errorThrown);
            


      );

html

            <div class='panel-body' id='rangemixbody'>

                <input type='hidden' id='rrgroup' value="<?php echo $group; ?>">
                <input type='hidden' id='rrclass' value="<?php echo $class; ?>">
                <input type='hidden' id='rrcategory' value="<?php echo $category; ?>">
                <input type='hidden' id='rrperiod' value="<?php echo $period; ?>">
                <input type='hidden' id='rryear' value="<?php echo $yr; ?>">
                <input type='hidden' id='rryearmonth' value="<?php echo $yrmth; ?>">
                <input type='hidden' id='rrstores' value='<?php implode(",", $storename); ?>'>

                <table class='table table-striped'>
                    <thead>
                        <tr>
                            <th>Subcategory</th>
                            <th><span>0%</span><span class="pull-right">100%</span></th>
                            <th>%</th>
                            <th>Current Range Size</th>
                            <th>Drop Skus</th>
                            <th>Keep Sales</th>
                            <th>Sales Share</th>
                        </tr>
                    </thead>
                    <tbody>
                    <?php
                    $i = 0;
                    $subcategories = array();
                    foreach($rangereviewarray as $row)
                    ?>
                        <tr>
                            <td>
                                <input type="hidden" id="subcategory<?php echo $i;?>" value="<?php echo $row['subcategory']; ?>">
                                <?php $subcategories[$i] = $row['subcategory']; ?>
                                <?php echo $row['subcategory']; ?>
                            </td>
                            <td>
                                <input id="slider<?php echo $i; ?>" type="text" class="slider" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="100" data-slider-tooltip="hide">
                            </td>
                            <td>
                                <span id="percentage<?php echo $i; ?>">100</span>%
                            </td>
                            <td>
                                <span id="rangesize<?php echo $i; ?>"><?php echo $row['rangesize']; ?></span>
                            </td>
                            <td><span id="dropskus<?php echo $i; ?>">0</span></td>
                            <td>
                                <input type="hidden" id="sales<?php echo $i; ?>" value="<?php echo $row['sales']; ?>">
                                <span id="keepsales<?php echo $i; ?>"><?php echo number_format($row['sales'], 2); ?></span>
                            </td>
                            <td><?php echo number_format($row['share'], 2); ?></td>
                        </tr>

                    <?php
                    $i++;
                    
                    ?>
                    </tbody>
                </table>
             <input type='hidden' id='rrsubcategories' value='<?php implode(",", $subcategories); ?>'>
            </div>

【问题讨论】：

你也可以发布你的html吗？

可能你引用了两次js文件

关于问题2：你在success和error属性中设置的函数是callbacks。这些回调是 async，这意味着它们可以在任何时间以任何顺序执行。这仅取决于请求何时完成。在这种情况下，错误比成功恢复得更快。

【参考方案1】：

从问题中很难确定事件触发两次的原因。根据随附的屏幕截图，我唯一的建议是在滑块与任何 DOM 元素不相关时取消请求：

function updateNumbers(rowoffset)

    var $el = $("#slider" + rowoffset);
    if( $el.length == 0 ) 
         return;
    

    //get variables from DOM element values

    var percentage = $el.val();
    var group = $("#rrgroup").val();
    var rrclass = $("#rrclass").val();
    var category = $("#rrcategory").val();
    var subcategory = $("#subcategory" + rowoffset).val();
    ..... rest of the function

【讨论】：

谢谢，这是一个很好的解决方法。我也发布了我的 html，但我认为这不会带来任何关于它发生原因的消息。我不禁认为这与滑块库有关。