移动端解决300ms延时

太过爱你忘了你带给我的痛 2022-05-27 13:25 195阅读 0赞

在移动端的web上存在这样一个问题：你给某个元素绑定上click事件，当你点击这个元素的时候，事件将在300ms之后才得以执行。这就是所谓的300ms延时问题。在若干年前300ms可能用户不会怎么介意，但是在如今的形势下，300ms显然已经会让用户感觉到明显的迟钝了，所以这个问题必须得解决。

# 解决方案之：Hammer.js #

上面的连接提供了若干种的解决方案。  
不过，目前我用的是：[Hammer.js][]  
Hammer.js常常有两个用途：

1.  支持移动端各种复杂的手势，比如长按、旋转等等
2.  解决300ms延时问题

不过，在hybrid app的开发理念中，复杂的手势往往意味着复杂的交互。对于复杂的交互，往往更倾向于采用native去实现，因为这样能获得更好的性能和体验。所以，hammer.js最一般的用途就是解决300ms延时。下面我们来写一个demo证明：用hammer.js的tap事件代替原生的click，能够消除300ms延时。

// html
    <div id="test">点我</div>
    <div id="tap"></div>
    <div id="click"></div>

// js
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <script src="./hammer.js"></script>
    <script>
           // 利用hammer绑定tap事件
            var hammertime = new Hammer(document.getElementById("test"),{});
            hammertime.on('tap', function(ev) {
                $('#tap').html('hammer封装tap事件触发时间戳:' + new Date().getTime());
            });
    
        //  绑定click事件
        $("#test").click(function () {
            $('#click').html('原生click事件触发时间戳:' + new Date().getTime())
        })
    </script>

[Hammer.js]: https://github.com/hammerjs/hammer.js