CODEWITHSUNDEEP
javascriptjquery
Benn
Benn

Reputation: 5023

Custom jquery number spinner optimization

I worked on this number spinner and it performs ok but sometimes it skips the numbers or needs 2/3 clicks to go up/down , what am I missing ?

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>

Upvotes: 0

Views: 104

Answers (1)

scniro
scniro

Reputation: 16979

Interesting, my assumption is that for a normal user, 50ms is too fast for a mousdown => mouseup completion. I changed your fiddle a bit, upping the setInterval for 80ms. You now have a slower spinner when holding, but one that seems to get consistent results on a normal click.

JSFiddle Link

Also, here's an interesting example to see time lapsed when clicking

Upvotes: 1

Related Questions