JS如何利用定时器实现长按事件

本篇文章由：http://xinpure.com/js-how-to-use-timer-press-event/

JS 原生事件并没有长按事件，但是我们可以利用一些原有的事件，来实现长按事件

任务需求

最近在工作上遇到一个特殊的需求，就是需要实现长按来增加或者减少数值

这就类似于，购物车中的物品数量的加减按钮，单击按钮物品数量相应增加或者减少一个数量，利用长按来实现快速增加或者减少物品数量

思考方法

在知道这个需求之后，开始还是比较茫然的

虽然在之前我也在一些购物 APP 里见到过这种长按的功能，但是在 JS 里似乎并没有长按事件

后来我就在想，怎么样利用现有的一些事件来实现这一功能呢？

这个时候我想到了 mousedown 和 mouseup 这两个事件

当时我就想，如果在 mousedown 事件触发的时候，利用 setTimeout 或者 setInterval 定时增加或者减少数值

然后在 mouseup 事件触发的时候，利用 clearTimeout 或者 clearInterval 清除定时器

这样是不是就能实现这样的需求呢？

实践想法

既然有了想法，就要付诸实践

我写了个例子来测试这个想法，结果却并没有想得这么简单

当我通过鼠标按住按钮之后，数值是不断的增加或者减少，但是即使我松开鼠标，数值却并没有停止，而是依然为不断的增加或者减少

这时我就疑惑了，理论上说，在 mouseup 事件触发之后，定时器应该是已经被清除的，为何没有清除呢？

带着疑惑，我开始了 Google

Google 将我指引到了 Jquery Mobile 库

这个类库实现了一个 taphold 事件，就是我想要的长按事件

既然已经有了类似的实现，我就在想，是不是我哪里想错了？

然后我就查看了 Jquery Mobile 关于 taphold 的源码

看完源码后，我惊喜的发现，原来他也是利用 setTimeout 来实现的这一事件，证明我的想法是对的！

带着惊喜，我开始分析我思考的不足的地方。

最后我发现，原来是我没有做好对事件的监听

我只是单纯的绑定了 mousedown 和 mouseup 两个事件，这是我在 JS 事件处理上的不足

完善实现

知道了问题之后，我就开始修改之前写的例子

采用 Jquery Mobile 库对事件的处理方式，来实现这个长按的功能，并且也根据自身的需求进行修改

在修改的过程中，我发现了一个问题，就是当我长按一个按钮的时候，如果我移动鼠标，长按事件也会一直持续下去，并且放开鼠标也不会停止

在翻看 JS 事件的之后，我找到了 mouseleave 这个事件，就是当鼠标离开按钮之后，会触发这个事件，加上之后，问题也得己解决。

为了兼容移动设备，我加上了对 touchstart 、touchend 、touchcencel 几个事件的监听

本来也想加上 touchleave 事件，来处理触摸时用户移动到按钮外的情况，但是似乎这个事件已经被废弃掉了：

This event was a proposal in an early version of the specification and has not been implemented. Do not rely on it. —— MDN

也尝试了使用 touchmove 事件来代替，但是似乎会影响用户体验

因为添加了这个事件之后，就算是在按钮上触摸移动，也会触发 touchmove 事件

所以如果是用户误操作的话，也会中止长按操作。

不过，touch 事件并不会像 mouse 事件一样，触摸移动到按钮外之后再放开手指，事件还是可以正常处理，并不会影响使用

最终代码

JS Code

var tapParams = {
    timer: {},
    element: {},
    tapStartTime: 0,
    type: 'increment'
};

function clearTapTimer() {
    clearTimeout(tapParams.timer);
}

function clearTapHandlers() {
    clearTapTimer();

    $(tapParams.element).unbind('mouseup', clearTapTimer)
        .unbind('mouseleave', clearTapHandlers);

    /* 移动设备 */
    $(tapParams.element).unbind('touchend', clearTapTimer)
        .unbind('touchcencel', clearTapHandlers);
}

function tapEvent(aEvent, aType) {

    /* 阻止默认事件并解除冒泡 */
    aEvent.preventDefault();
    aEvent.stopPropagation();

    tapParams = {
        element: aEvent.target,
        startTime: new Date().getTime() / 1000,
        type: aType
    };

    $(tapParams.element).bind('mouseup', clearTapTimer)
        .bind('mouseleave', clearTapHandlers);

    /* 移动设备 */
    $(tapParams.element).bind('touchend', clearTapTimer)
        .bind('touchcencel', clearTapHandlers);

    changeNumber();
}

function changeNumber() {

    var currentDate = new Date().getTime() / 1000;
    var intervalTime = currentDate - tapParams.startTime;

    /* 根据长按的时间改变数值变化幅度 */
    if (intervalTime < 1) {
        intervalTime = 0.5;
    }
    var secondCount = intervalTime * 10;
    if (intervalTime == 3) {
        secondCount = 50;
    }
    if (intervalTime >= 4) {
        secondCount = 100;
    }

    var numberElement = $('.number');
    var currentNumber = parseInt(numberElement.val());

    if (tapParams.type == 'increment') {
        currentNumber += 1;
    } else if (tapParams.type == 'decrement') {
        currentNumber -= 1;
    }

    numberElement.val(currentNumber <= 0 ? 1 : currentNumber);

    tapParams.timer = setTimeout('changeNumber()', 1000 / secondCount);
}

HTML Code

<div class="container">
    <div class="section">
        <div class="decrement" onmousedown="tapEvent(event, 'decrement')" ontouchstart="tapEvent(event, 'decrement')">－</div>
        <input class="number" value="1">
        <div class="increment" onmousedown="tapEvent(event, 'increment')" ontouchstart="tapEvent(event, 'increment')">＋</div>
    </div>
</div>

CSS Code

.section {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-align-items: center;
    align-items: center;
    height: 30px;
    width: 130px;
    font-size: 16px;
}
.number {
    -webkit-flex: 1;
    flex: 1;
    width: 30px;
    height: 30px;
    border: 1px solid #000;
    display: inline-block;
    border-radius: 5px;
    margin: 0 10px;
    text-align: center;
}
.decrement, .increment {
    width: 30px;
    height: 30px;
    border: 1px solid #000;
    display: inline-block;
    border-radius: 5px;
    text-align: center;
    line-height: 28px;
    cursor: pointer;
    font-size: 20px;
}

效果展示