Question

我在这个数字微调器上工作，它表现不错，但有时它跳过数字或需要2/3点击上/下，我错过了什么？

      $(function() {
        var action;
        $(".thz-spinner a").mousedown(function() {
          btn = $(this);
          input = btn.closest('.thz-spinner').find('input');

          spin_step = 1;
          decimals = 0;
          if (input.attr('data-step')) {
            spin_step = parseFloat(input.attr('data-step'));
          }
          if (input.attr('data-step') < 1) {
            decimals = 2;
          }

          if (btn.hasClass('thz-spinner-up')) {
            action = setInterval(function() {
              currentvalue = input.val();
              if (!$.isNumeric(currentvalue)) {
                currentvalue = 0;
              }
              if (input.attr('data-max') == undefined || parseFloat(currentvalue) < parseFloat(input.attr('data-max'))) {

                var newvalue = parseFloat(currentvalue) + spin_step;
                if (newvalue % 1 === 0) {
                  newvalue = newvalue.toFixed(0);
                } else {
                  newvalue = newvalue.toFixed(decimals);
                }

                input.val(newvalue);

              } else {
                clearInterval(action);
              }
            }, 50);
          } else {
            action = setInterval(function() {
              currentvalue = input.val();
              if (!$.isNumeric(currentvalue)) {
                currentvalue = 0;
              }
              if (input.attr('data-min') == undefined || parseFloat(currentvalue) > parseFloat(input.attr('data-min'))) {
                var newvalue = parseFloat(currentvalue) - spin_step;
                if (newvalue % 1 === 0) {
                  newvalue = newvalue.toFixed(0);
                } else {
                  newvalue = newvalue.toFixed(decimals);
                }
                input.val(newvalue);
              } else {
                clearInterval(action);
              }
            }, 50);
          }
        }).mouseup(function() {
          clearInterval(action);
          btn = $(this);
          input = btn.closest('.thz-spinner').find('input').change();

        });
      });

a {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="contentblock-thzspinner" class="thz-spinner">
  <input name="fw_options[sidebars_width][contentblock]" id="fw-option-sidebars_width-contentblock" class="fw-option fw-option-type-thzspinner" value="55" type="text" data-min="0" data-max="100" data-step="0.01"><a class="thz-spinner-up" tabindex="-1" role="button" data-dir="up">▲</a><a class="thz-spinner-down" tabindex="-1" role="button" data-dir="dwn">▼</a><span class="add-on">%</span>

</div>
<div id="margin-left-thzspinner" class="thz-spinner">
  <input class="fw-option fw-option-type-thzspinner margin-left" name="fw_options[tm_boxmodel][margin][margin-left]" id="fw-option-tm_boxmodel-margin-margin-left" value="auto" type="text"><a class="thz-spinner-up" tabindex="-1" role="button" data-dir="up">▲</a><a class="thz-spinner-down" tabindex="-1" role="button" data-dir="dwn">▼</a><span class="add-on">px</span>

</div>
<div id="margin-bottom-thzspinner" class="thz-spinner">
  <input class="fw-option fw-option-type-thzspinner margin-bottom" name="fw_options[tm_boxmodel][margin][margin-bottom]" id="fw-option-tm_boxmodel-margin-margin-bottom" value="0" type="text"><a class="thz-spinner-up" tabindex="-1" role="button" data-dir="up">▲</a><a class="thz-spinner-down" tabindex="-1" role="button" data-dir="dwn">▼</a><span class="add-on">px</span>

</div>

Answer 1

有趣的是，我的假设是，对于普通用户来说，50ms对于mousdown来说太快了=＆gt;鼠标完成。我改变了你的小提琴，将setInterval提高了80ms。您现在拥有一个较慢的微调器，但是似乎可以在正常点击时获得一致的结果。

JSFiddle Link

此外，点击

时，看到时间已过，这是一个有趣的example

自定义jquery数字微调器优化

1 个答案: