JavaScript实现长按功能问题

Question

JScript code
var dt2;
        var st;
        function test() {
            dt1 = new Date();
            st = setTimeout(tt, 1000);
            return true;
        }

        function tt() {
            dt2 = new Date();
            if (dt2.getTime() - dt1.getTime() > 1000) {
                clearTimeout(st);
                $("#ttt").html("hahahahaha");return true;
            }
        }



HTML code
<div id="ttt" style="height: 100px; border: 1px solid #c0c0c0;" onmousedown="return test();">
        test</div>



用vs调试，长按之后，tt()方法断点可以进去，div的内容可以被更新。
但是，如果不加断点，一直按，就没有任何效果。
请问这是怎么回事啊？

Answer 1

你的设计有问题，这段代码中tt永远是1秒后执行。并且有可能定时有偏差，导致你那里判断不通过。

你应该在test中注册document的mouseup来检测下什么时候松开的，如果触发，则应该清除setTimeout句柄。
当然tt执行时，也应该清除mouseup句柄

这样，一但鼠标提前松开，就能中止掉定时器