Question

以下代码段显示核心结构：

EDIT1：

var smthing = 0;
change_name_button.addEventListener('click', function(event){
    // some query
    // .....

    // result from query
    data = res.name.coords;

    // tried to make the function go to GC
    smthing = null;
    delete smthing;
    smthing = new drawMouseMovement(data);

    event.stopPropagation();
}, false);      

function drawMouseMovement(data){
    // bunch of variables set for drawing function
    // .....
    // .....
    var test = 0;

    // draw something to canvas until end "maxLength" is reached
    var draw = function() {
        if(t < maxLength){
            // redraw some stuff to canvas
            // .....
        }else{
            return;
        }
    }

    // function to play pause and replay the drawing on canvas
    function playPause(boolPP, boolRP){
        if(boolPP){
            test = setInterval(draw, 10);
        }else{
            clearInterval(test);
        }
        if(boolRP){
            // some params being reset
            // .....

            test = setInterval(draw, 10);
        }
    }

    function play(event){
        playPause(true, false);
        event.stopPropagation();
    }

    function pause(event){
        playPause(false, false);
        event.stopPropagation();
    }

    function replay(event){
        playPause(false, true);
        event.stopPropagation();
    }

    play_button.addEventListener('click', play, false);

    pause_button.addEventListener('click', pause, false);

    replay_button.addEventListener('click', replay, false);
}

每次点击change_name_button时，都会使用新参数调用drawMouseMovement()。

以下问题：当再次单击return之前绘制函数未达到change_name_button时，同一函数的两个实例同时绘制两个不同的东西。只有最后一个被调用的函数实例应该是绘图。

我尝试删除指向函数的指针clearInterval()和removeEventListener。但我似乎没有让任何这些工作。

我希望我的问题很明确。提前谢谢。

修改

问题的简单复制。 some_button点击一次，smt每250毫秒打印一次。 some_button是否第二次被点击，每隔125ms打印一次smt等。如何在下次点击时覆盖printer()的第一个实例？

some_button.addEventListener('click', foo, false);

function foo(event) {
    printer();
    event.stopPropagation();
}

function printer(){
    setInterval(function() {
        console.log("smt");
    }, 250);
}

Answer 1

更新2

问题的简单复制。 some_button被点击一次，smt每250ms打印一次。 some_button是否第二次点击，每125ms打印一次smt等。如何在下一次点击时覆盖打印机（）的第一个实例？

没办法！不要杀死这个功能，让它骑行。首先，您需要一个计数器来计算点击次数，以便函数知道它已被第二次点击。其次，只需在第二次单击按钮时添加额外的行为，在这种情况下，您将达到时间间隔的一半。

好的，当我说JavaScript时间很奇怪时，我的意思是fu＃@ 3d。 setInterval需要clearInterval来阻止它。大多数文章和教程没有说的是该死的setInterval仍然存在，所以将它null设为允许你创建一个新的<!DOCTYPE html> <html> <head> <style> .on { display: block; } button { display: none; } </style> </head> <body> <button id="btn1" class="on">Go</button><button id="btn2" class="">Stop</button> <script> var btn1 = document.getElementById('btn1'); var btn2 = document.getElementById('btn2'); var counter = 0; var timer = new Timer(); btn1.addEventListener('click', xStart, false); btn2.addEventListener('click', xStop, false); function xStart(event) { timer.term; counter++; timer.start(counter); btn1.classList.toggle('on'); btn2.classList.toggle('on'); event.stopPropagation(); } function xStop(event) { timer.term(); btn1.classList.toggle('on'); btn2.classList.toggle('on'); event.stopPropagation(); } function Timer(c){ var self = this; self.start = function(c){ var t = self.printer(c); self.interval = setInterval(function() { self.printer(c); },t); }; self.term = function(){ self.clear = clearInterval(self.interval); self.null; }; self.printer = function(x){ var d = (x % 2 === 0) ? 2 : 1; var t = 2000 / d; console.log('smt'+x+' t: '+t); return t; }; } </script> </body> </html>。我决定制作一个构造函数计时器。

该演示有一个按钮，点击它然后打印出来＆＃39; smt＆＃39;每2秒加上开始新间隔的点击次数。
＆＃39; Go＆＃39;按钮被“停止”按钮取代按钮，一旦点击它就像宣传的那样 - 停止
再次点击它，它就是＆＃39; Go＆＃39;按钮，但这次，它现在每秒打印一次。
泡沫，冲洗，重复。

使用一些原型魔法重构这个演示，你就得到了一个类。

PLUNKER - TIMER CONSTRUCTOR

PLUNKER - 1 EVENTLISTENER, MULTIPLE EVENT.TARGETS

段

＆＃13;

eventListeners()

＆＃13;

更新1

以下Plunker演示了如何使唯一的eventListener成为您的按钮共享的元素作为父元素。

PLUNKER

<小时/>

OLD

你change_name_button.addEventListener('click', function(event){ // some query // ..... // result from query data = res.name.coords; // tried to make the function go to GC smthing = null; delete smthing; smthing = new drawMouseMovement(data); event.stopPropagation(); }, false);没有任何关于捕获阶段的内容，虽然我认为默认情况下它是假的，但尝试将其设置为false。

event.stopPropagation();

^^^^^^^^ ======有捕获阶段`

在其他事件处理程序上也使用(event)，并靠近处理程序的末尾。别忘了传递function play(event){ playPause(true, false); event.stopPropagation(); } function pause(event){ playPause(false, false); event.stopPropagation(); } function replay(event){ playPause(false, true); event.stopPropagation(); } play_button.addEventListener('click', play, false); pause_button.addEventListener('click', pause, false); replay_button.addEventListener('click', replay, false);对象。

event.target

此外，如果这不能解决问题，那么您需要发布HTML，因为可能需要调整event.currentTarget和if else的布局。

修改

尝试更改function drawMouseMovement(data){ // bunch of variables set for drawing function // ..... // ..... var test = 0; // draw something to canvas until end "maxLength" is reached var draw = function() { if(t < maxLength){ // redraw some stuff to canvas // ..... } // when t has reached maxlength, then it should quit? return false; }

ImportantObject

JS中的draw（）函数的事件冒泡

1 个答案:

更新2

段

更新1

OLD

修改