javascript - 如何使 JQuery 步进器/微调器按钮在按下时更快地通过列表？

Question

我正在开发一个步进器/微调器，它将标准的 HTML 选择列表变成一个微调器，您可以在其中按 + 向上和 - 向下。让它工作正常......

https://jsfiddle.net/5pmarmov/40/

但是，如果您按住鼠标并按住 + 或 -，我希望它能够更快地翻阅列表，而不是必须为列表的每一步实际单击一次。

这可能吗？如果是这样，有人可以指出我正确的方向吗？

此时可能无关紧要，但仅供引用，我希望它也能在 iOS 和 Android 中运行。不确定这是否是单独完成的，或者桌面的相同代码是否会继续并在所有移动设备上工作(理想情况，显然哈哈)。

代码...HTML

 <select name='weight' id='weightpicker' class='hide-cat-input select-step' >
                        <option value=''>Choose Weight</option>
                        <option value='5'>0 lbs or less</option><option value='5.0625'>5 lbs, 1 oz.</option><option value='5.125'>5 lbs, 2 oz.</option><option value='5.1875'>5 lbs, 3 oz.</option><option value='5.25'>5 lbs, 4 oz.</option><option value='5.3125'>5 lbs, 5 oz.</option><option value='5.375'>5 lbs, 6 oz.</option><option value='5.4375'>5 lbs, 7 oz.</option><option value='5.5'>5 lbs, 8 oz.</option><option value='5.5625'>5 lbs, 9 oz.</option><option value='5.625'>5 lbs, 10 oz.</option><option value='5.6875'>5 lbs, 11 oz.</option><option value='5.75'>5 lbs, 12 oz.</option><option value='5.8125'>5 lbs, 13 oz.</option><option value='5.875'>5 lbs, 14 oz.</option><option value='5.9375'>5 lbs, 15 oz.</option><option value='6'>6 lbs, 0 oz.</option><option value='6.0625'>6 lbs, 1 oz.</option><option value='6.125'>6 lbs, 2 oz.</option><option value='6.1875'>6 lbs, 3 oz.</option><option value='6.25'>6 lbs, 4 oz.</option><option value='6.3125'>6 lbs, 5 oz.</option><option value='6.375'>6 lbs, 6 oz.</option><option value='6.4375'>6 lbs, 7 oz.</option><option value='6.5'>6 lbs, 8 oz.</option><option value='6.5625'>6 lbs, 9 oz.</option><option value='6.625'>6 lbs, 10 oz.</option><option value='6.6875'>6 lbs, 11 oz.</option><option value='6.75'>6 lbs, 12 oz.</option><option value='6.8125'>6 lbs, 13 oz.</option><option value='6.875'>6 lbs, 14 oz.</option><option value='6.9375'>6 lbs, 15 oz.</option><option value='7'>7 lbs, 0 oz.</option><option value='7.0625'>7 lbs, 1 oz.</option><option value='7.125'>7 lbs, 2 oz.</option><option value='7.1875'>7 lbs, 3 oz.</option><option value='7.25'>7 lbs, 4 oz.</option><option value='7.3125'>7 lbs, 5 oz.</option><option value='7.375'>7 lbs, 6 oz.</option><option value='7.4375'>7 lbs, 7 oz.</option><option value='7.5' selected='selected'>7 lbs, 8 oz.</option><option value='7.5625'>7 lbs, 9 oz.</option><option value='7.625'>7 lbs, 10 oz.</option><option value='7.6875'>7 lbs, 11 oz.</option><option value='7.75'>7 lbs, 12 oz.</option><option value='7.8125'>7 lbs, 13 oz.</option><option value='7.875'>7 lbs, 14 oz.</option><option value='7.9375'>7 lbs, 15 oz.</option><option value='8'>8 lbs, 0 oz.</option><option value='8.0625'>8 lbs, 1 oz.</option><option value='8.125'>8 lbs, 2 oz.</option><option value='8.1875'>8 lbs, 3 oz.</option><option value='8.25'>8 lbs, 4 oz.</option><option value='8.3125'>8 lbs, 5 oz.</option><option value='8.375'>8 lbs, 6 oz.</option><option value='8.4375'>8 lbs, 7 oz.</option><option value='8.5'>8 lbs, 8 oz.</option><option value='8.5625'>8 lbs, 9 oz.</option><option value='8.625'>8 lbs, 10 oz.</option><option value='8.6875'>8 lbs, 11 oz.</option><option value='8.75'>8 lbs, 12 oz.</option><option value='8.8125'>8 lbs, 13 oz.</option><option value='8.875'>8 lbs, 14 oz.</option><option value='8.9375'>8 lbs, 15 oz.</option><option value='9'>9 lbs, 0 oz.</option><option value='9.0625'>9 lbs, 1 oz.</option><option value='9.125'>9 lbs, 2 oz.</option><option value='9.1875'>9 lbs, 3 oz.</option><option value='9.25'>9 lbs, 4 oz.</option><option value='9.3125'>9 lbs, 5 oz.</option><option value='9.375'>9 lbs, 6 oz.</option><option value='9.4375'>9 lbs, 7 oz.</option><option value='9.5'>9 lbs, 8 oz.</option><option value='9.5625'>9 lbs, 9 oz.</option><option value='9.625'>9 lbs, 10 oz.</option><option value='9.6875'>9 lbs, 11 oz.</option><option value='9.75'>9 lbs, 12 oz.</option><option value='9.8125'>9 lbs, 13 oz.</option><option value='9.875'>9 lbs, 14 oz.</option><option value='9.9375'>9 lbs, 15 oz.</option><option value='10'>10 lbs, 0 oz.</option><option value='10.0625'>10 lbs, 1 oz.</option><option value='10.125'>10 lbs, 2 oz.</option><option value='10.1875'>10 lbs, 3 oz.</option><option value='10.25'>10 lbs, 4 oz.</option><option value='10.3125'>10 lbs, 5 oz.</option><option value='10.375'>10 lbs, 6 oz.</option><option value='10.4375'>10 lbs, 7 oz.</option><option value='10.5'>10 lbs, 8 oz.</option><option value='10.5625'>10 lbs, 9 oz.</option><option value='10.625'>10 lbs, 10 oz.</option><option value='10.6875'>10 lbs, 11 oz.</option><option value='10.75'>10 lbs, 12 oz.</option><option value='10.8125'>10 lbs, 13 oz.</option><option value='10.875'>10 lbs, 14 oz.</option><option value='10.9375'>10 lbs, 15 oz.</option><option value='11'>11 lbs, 0 oz.</option><option value='11.0625'>11 lbs, 1 oz.</option><option value='11.125'>11 lbs, 2 oz.</option><option value='11.1875'>11 lbs, 3 oz.</option><option value='11.25'>11 lbs, 4 oz.</option><option value='11.3125'>11 lbs, 5 oz.</option><option value='11.375'>11 lbs, 6 oz.</option><option value='11.4375'>11 lbs, 7 oz.</option><option value='11.5'>11 lbs, 8 oz.</option><option value='11.5625'>11 lbs, 9 oz.</option><option value='11.625'>11 lbs, 10 oz.</option><option value='11.6875'>11 lbs, 11 oz.</option><option value='11.75'>11 lbs, 12 oz.</option><option value='11.8125'>11 lbs, 13 oz.</option><option value='11.875'>11 lbs, 14 oz.</option><option value='11.9375'>11 lbs, 15 oz.</option><option value='12'>12 lbs or more</option>
                        </select>

JS:

$(function() {
    $(".select-step").selectStep({
          onChange: function(value) {
            console.log(value, "value");
          }
        });
    })
(function ($) {
    $.fn.selectStep = function (vars) {
        /*
         * Function to get all plugin's variables
         * and element options on array
         */
        function getData(element, callback) {
            // Define default variables
            var defaultVars = {
                onChange: null,
                incrementLabel: "+",
                decrementLabel: "-"
            };
            var assign = Object.assign;
            // Get all plugin variables
            vars = assign({}, defaultVars, vars);
            var options = [];
            // Get select options
            var optElement = $(element).find("option");
            optElement.each(function (i, o) {
                var name = $(this).text();
                var value = $(this).attr("value");
                var selected = $(this).is(':selected');
                options = options.concat([{ name: name, value: value, selected: selected }]);
                if (i === optElement.length - 1) {
                    // Fire callback with select options and variables
                    callback(vars, options);
                }
            });
        }
        /*
         * Function to create fake element
         * to mock the select elements
         */
        function addFakeElements(element, callback) {
            getData(element, function (vars, options) {
                // Check if options is empty
                if (!options.length) {
                    return;
                }
                // Add class to select element
                jQuery(element).addClass("select-step");
                // Add fake elements
                var incrementLabel = vars.incrementLabel, decrementLabel = vars.decrementLabel;
                // Find selected option on the select element
                var isSelected = [];
                options.map(function (opt, key) {
                    if (opt.selected) {
                        isSelected = isSelected.concat([{ key: key, name: opt.name, value: opt.value }]);
                    }
                    return false;
                });
                var selectedOptionName = isSelected.length ? isSelected[0].name : null;
                var selectedOptionKey = isSelected.length ? isSelected[0].key : null;
                var selectedOptionvalue = isSelected.length ? isSelected[0].value : null;
                // Create the fake element
                var fakeElement = "<div class=\"jquery-select-step-element\">\n                  <div class=\"decrementStep\">" + decrementLabel + "</div>\n                  <div class=\"selectStepValue\" data-key=\"" + selectedOptionKey + "\" data-value=\"" + selectedOptionvalue + "\">\n                    " + selectedOptionName + "\n                  </div>\n                  <div class=\"incrementStep\">" + incrementLabel + "</div>\n                </div>";
                // Wrap select to a div
                var parentElement = $(element)
                    .wrap("<div class=\"jquery-select-step\"></div>")
                    .parent();
                // Append the fake element
                parentElement.append(fakeElement);
                // Fire callback when finished
                callback(vars, options, parentElement);
            });
        }
        /*
         * Function to check if variable is function
         */
        function isFunction(functionToCheck) {
            var getType = {};
            return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
        }
        /*
         * Function to handle the increment and decrement of the plugins
         * it fire onChange event and change the select value
         */
        function handleChange(element, vars, options, type) {
            var selectStepValue = $(element).find(".selectStepValue"); // Get the element that show the value
            var key = parseInt($(selectStepValue).attr("data-key")); // Get current active key
            var onChange = vars.onChange; // Get user onChange event
            // Check if the key is not less than 0 or bigger than select options length
            if (type === "decrement" && key <= 0 || type === "increment" && key >= options.length - 1) {
                return;
            }
            // Get the new key
            var newKey = (type === "decrement" ? (key - 1) : (key + 1));
            var _a = options[newKey], name = _a.name, value = _a.value; // Get name and value of the new key
            // Change value
            selectStepValue.text(name);
            selectStepValue.attr("data-key", newKey);
            selectStepValue.attr("data-value", value);
            // Change select element selected options
            jQuery(element).find(".select-step option").removeAttr('selected');
            jQuery(element).find(".select-step option:eq(" + newKey + ")").attr('selected', true);
            // Fire onChange event
            if (onChange !== null && isFunction(onChange)) {
                onChange({
                    key: newKey,
                    name: name,
                    value: value
                });
            }
        }
        /*
         * Function to initialize the plugins
         */
        function init(element) {
            addFakeElements(element, function (vars, options, parentElm) {
                // Listen to change event
                $(parentElm).on("click", ".decrementStep", function () {
                    handleChange(parentElm, vars, options, "decrement");
                });
                $(parentElm).on("click", ".incrementStep", function () {
                    handleChange(parentElm, vars, options, "increment");
                });
            });
        }
        init(this);
        return this;
    };
}(jQuery));

CSS:

/* Do not change */

.select-step {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
    -webkit-appearance: none;
}

/* You can change from here */

.jquery-select-step {
    display: inline-block;
}
.jquery-select-step-element {
    position: relative;
    display: inline-block;
    padding: 5px 45px;
    font-size: 13px;
    font-weight: bold;
    line-height: 20px;
    color: #333;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    background-color: #fff;
    border: 1px solid #d5d5d5;
    border-radius: 3px;
}
.jquery-select-step-element > div {
    display: inline-block;
}
.decrementStep, .incrementStep {
    position: absolute;
    width: 30px;
    left: 0;
    top: 0;
    padding: 5px;
    text-align: center;
    border-right: 1px solid #d5d5d5;
    background-image: -webkit-linear-gradient(#fcfcfc, #eee);
    background-image: linear-gradient(#fcfcfc, #eee);
    cursor: pointer;
}
.incrementStep {
    left: auto;
    right: 0;
    border-right: 0;
    border-left: 1px solid #d5d5d5;
}

Answer 1

使用 setTimeout 和 setInterval 的组合分配给带有 mousedown 和 mouseup 事件监听器的变量，您可以开始在 mousedown 的设定时间后一个频率计数器，然后在 mouseup 上清除这些计时器。

如果你用这个替换你 js 中的最后一个函数(从第 114 行开始)。您可以将操作缩写为函数，使其更干一些，它们在此处打开以供解释。

对于 android 和 ios，事件监听器分别是 touchstart 和 touchend。

在这里摆弄:https://jsfiddle.net/manoeuvres/hmjc949t/1/

/*
 * Function to initialize the plugins
 */
var timer1, freq1;

function init(element) {
    addFakeElements(element, function (vars, options, parentElm) {
        // Listen to change event
        $(parentElm).on({
          click: function () {
              handleChange(parentElm, vars, options, "increment");
          },
          'touchstart mousedown': function(){
            timer1 = setTimeout(function(){
                freq1 = setInterval(function(){
                handleChange(parentElm, vars, options, "increment");
              }, 300); // vary this to control speed
            },300); // vary this to control start delay
          },
          'touchend mouseup': function(){
            clearTimeout(timer1);
            clearInterval(freq1);
          }
        },".incrementStep");
        $(parentElm).on({
          click: function () {
              handleChange(parentElm, vars, options, "decrement");
          },
          'touchstart mousedown': function(){
            timer1 = setTimeout(function(){
                freq1 = setInterval(function(){
                handleChange(parentElm, vars, options, "decrement");
              }, 300); // vary this to control speed
            },300); // vary this to control start delay
          },
          'touchend mouseup': function(){
           clearTimeout(timer1);
           clearInterval(freq1);
          }
        },".decrementStep");
    });
}