javascript - 自定义 jquery 数字微调器优化

Question

我开发了这个数字旋转器，它运行良好，但有时它会跳过数字或需要 2/3 次点击才能向上/向下，我错过了什么？

http://jsfiddle.net/hbtxdg4m/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

有趣的是，我的假设是，对于普通用户来说，50 毫秒对于 mousdown => mouseup 完成来说太快了。我稍微改变了你的 fiddle ，将 setInterval 提高了 80 毫秒。现在，按住时旋转器会变慢，但似乎在正常点击时会获得一致的结果。

JSFiddle Link

此外，这里有一个有趣的 example单击时查看耗时