Question

我似乎有某种并发问题试图让点击事件发生。问题是我使用setInterval运行动画，但是停止按钮没有触发，可能是因为Javascript很忙。如果我一遍又一遍地快速点击“停止”按钮，我可以让它停下来。代码如下所示：

    var timer_id = null;
    function play(){
        timer_id = setInterval( function(){ 
            time_second++;
            if( time_second == 60 ){
                time_minute++;
                time_second = 0;
            }
            render();
        }, 1000 / time_compression_factor );
        console.log( "timer id: " + timer_id );
    }

    function stop(){
        console.log( "stopped" );
        if( timer_id != null );
        clearInterval( timer_id );
        timer_id = null;
    }
    function drawVCRControls(){
        var width_timeslice = 7 + 3;
        var ul_x = 20 + 120 * width_timeslice + 15;
        var ul_y = viewportHeight - 40;
        var pathPlayBack    = "m 20  0  l 10 -8  l  0 16  Z";
        var pathStop        = "m 35 -8  l 16  0  l  0 16  l -16 0 Z";
        var pathPlayForward = "m 57  0  l  0 -8  l 10  8  l -10 8 Z";
        var pathStepBack    = "m 12 20  l 10 -8  l  0 16  Z  m 13 -8  l 5 0  l 0 16  l -5 0 Z";
        var pathPause       = "m 35 12  h 6 v 16  h -6 Z  m 10 0  h 6 v 16  h -6 Z ";
        var pathStepForward = "m 57 12  h 5 v 16  h -5 Z  m  8 0  l 10 8  l -10 8 Z";
        createPath( "vcrPlayBack", ul_x, ul_y, pathPlayBack, 1, "orangered", "orange", 1, 0 );
        createPath( "vcrStop", ul_x, ul_y, pathStop, 1, "orangered", "orange", 1, 0 );
        createPath( "vcrPlayForward", ul_x, ul_y, pathPlayForward, 1, "orangered", "orange", 1, 0 );    
        createPath( "vcrStepBack", ul_x, ul_y, pathStepBack, 1, "orangered", "orange", 1, 0 );
        createPath( "vcrPause", ul_x, ul_y, pathPause, 1, "orangered", "orange", 1, 0 );    
        createPath( "vcrStepForward", ul_x, ul_y, pathStepForward, 1, "orangered", "orange", 1, 0 );
        vcrPlayForward.addEventListener( "click", function(){
            play();
        }, false );
        vcrStop.addEventListener( "click", function(){
            stop();
        }, false );
    }

render()函数中的play()调用会产生很多东西，所以我认为当它忙于绘制它时实际上忽略了vcrStop按钮上的click事件。我可以看到这个，因为我有一个console.log语句，它会在stop()被调用时记录，当我点击vcrStop按钮时它不会被调用。

我知道处理程序运行正常，因为如果在开始动画之前单击vcrStop按钮，它将被记录到控制台。

请注意，如果我在1秒运行间隔，那么一切正常，但间隔越短，停止动画就越难。例如，如果我使用500毫秒的间隔，我可能需要点击两到三次来停止它，但如果我使用100毫秒的间隔（所需的间隔），我必须非常快地点击10次或更多。

我该如何解决这个问题？

Answer 1

为您的特定问题设置JSFiddle会很有帮助，这将非常有帮助。

我认为你的问题正是你所说的 - 剧本很忙。问题是JavaScript是在单线程庄园中执行的。因此，只能在渲染完成后处理click事件。要取消可能的渲染，您可以在几个步骤中拆分渲染并在链式回调中调用每个渲染，即，在第一个完成后，调用第二步渲染，当且仅当进程未被取消时。

无论如何，你提到你有一个console.log来点击。渲染完成后，您是否看到了日志的输出？

Answer 2

是的，您可能是对的，渲染（）可能会阻止点击事件被触发。但是点击事件也需要一些时间来触发，因为它是 mousedown 和 mouseup 事件的组合。这可能比你的间隔大。您可以尝试 mousedown 事件，我认为这比点击泡泡花费更少的时间。

祝你好运

繁忙时没有发生Javascript点击事件

2 个答案: