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

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

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);
}

更新2 问题的简单复制。单击某个按钮一次，smt每250ms打印一次。是否第二次单击某个按钮，smt每隔125ms打印一次等。如何在下次单击时覆盖printer（）的第一个实例

不可能！不要扼杀功能，让它自由发挥。首先，您需要一个计数器来计算点击次数，以便函数知道第二次点击了它。其次，只需为第二次单击按钮添加额外的行为，在这种情况下，您将使用一半的时间间隔

好吧，当我说JavaScript时间很古怪时，我是说fu#@3d

setInterval

需要

clearInterval

来停止它。大多数文章和教程都没有说明该死的

setInterval

仍然存在，因此将其设置为

null将允许您创建一个新的。我决定做一个构造函数计时器


演示有一个按钮，点击它，它会每2秒打印一次“smt”，加上点击次数，开始一个新的间隔

“Go”按钮被“Stop”按钮替换，单击后，它会按照广告中的方式停止

再次单击它，它是“Go”按钮，但这一次，它每秒都在打印

起泡，冲洗，重复


用一些原型向导重构这个演示，你就得到了一个类



一小条


.on{display:block；}
按钮{显示：无；}
戈斯托普
var btn1=document.getElementById（'btn1'）；
var btn2=document.getElementById（'btn2'）；
var计数器=0；
var timer=new timer（）；
btn1.addEventListener（'click'，xStart，false）；
btn2.addEventListener（'click'，xStop，false）；
函数xStart（事件）{
计时器。术语；
计数器++；
定时器。启动（计数器）；
btn1.classList.toggle（'on'）；
btn2.classList.toggle（'on'）；
event.stopPropagation（）；
}
函数xStop（事件）{
timer.term（）；
btn1.classList.toggle（'on'）；
btn2.classList.toggle（'on'）；
event.stopPropagation（）；
}
功能计时器（c）{
var self=这个；
self.start=功能（c）{
var t=自打印机（c）；
self.interval=setInterval（函数（）{self.printer（c）；}，t）；
};
self.term=函数（）{
self.clear=清除间隔（self.interval）；
self.null；
};
self.printer=函数（x）{
变量d=（x%2==0）？2:1；
var t=2000/d；
console.log（'smt'+x+'t:'+t）；
返回t；
};
}
遗憾的是，你的第一个建议没有奏效。我还是更新了它，并包含了html代码段。请你澄清一下你最后一句话的意思好吗？如果你将eventListeners分组在一个公共父元素下，那么有一种方法可以隔离每个单击的元素，从而防止在冒泡阶段出现不必要的调用。我注意到
drawMouseMovement（data）
的If-else部分可能会有不同的做法，但我不是100%确定，因为它是不完整的。我将用建议更新答案，待机…为了澄清，只有在再次调用
drawMouseMovement（）
之前，
t
未达到
maxLength
时才会出现问题。因此，在启动下一个实例之前，必须为该函数的实例触发
return
。我认为关于draw函数，这就是为什么我建议您删除
else return false
，改用
return false
。如果有
，看起来您有
其他
！t
t=未定义
。在
if（t
语句内部是一个谜，所以我不知道当
t这行看起来像是在创建一个新的函数对象而不是结束旧的函数对象时，您有什么退出计划：
smthing=new drawMouseMovement（data）
我有一个更新，演示了一个eventListener，多个
事件。目标
阅读有关
新的
操作符的信息当涉及到计算几百毫秒之间的差异时，几乎不可能在一个小时间窗内进行如此精确的控制。JavaScript通常平均关闭5到10毫秒。你看过那个演示吗？我使用了一个开关来路由函数，这样您就可以触发一个事件。现在的方式是：单击4个eventListener 4个函数。我的演示：1单击1事件侦听器4函数。如果绘制函数的持续时间延长，则应尝试创建类或函数装饰器。这些是高级模式。cont-->类继承和函数修饰符请参阅有关打印函数的更新。
some_button.addEventListener('click', foo, false);

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

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