计时器不会停止触发函数

Timer won't stop firing a function

本文关键字：函数 计时器      更新时间：2023-09-26
video.onloadedmetadata = function start(){ //invoke
    var thethis = this;
    var event;
    var timeout;
    function func(){
        mainFunction(event); //this is supposed to fire only once, instead it fires constantly.
        console.log("sending!!!"); //This won't stop show up in the console
        clearTimeout(timeout);
        console.log(event);
    }

    video.addEventListener("mousemove", function(e){
        event = e;
        outsideElement = false;
        clearTimeout(timeout);
        timeout = setTimeout(func, 600);
    });
    video.addEventListener("mouseout", function(){ //mouse is out of elem
        outsideElement = true; //extra security, really make sure not to fire Mainfunction will check - if it's indeed outsideElement then it won't work properly.
        clearTimeout(timeout);
    }); //don't fire mainFunction in this case

}

我想做的很简单，尽管实际上不起作用。一旦用户在我的视频上移动鼠标，并且他在某个位置停止半秒钟，一个名为mainFunction的函数应该触发一次。下次他移动鼠标并停在某个地方时，它应该会再次发生 - 但它不会停止触发mainFunction。由于多种原因，我无法使用jQuery，所以请 - 如果你能帮忙，只是没有任何库。

JS小提琴：(也检查控制台(https://jsfiddle.net/7con1p04/1/

这是一个 jsFiddle，它将您的功能归结为计时器/鼠标移动延迟(相同的代码，只是删除了其他所有内容(： 

var timeout;
function func(){
    console.log('fire');
    clearTimeout(timeout);
}
document.addEventListener("mousemove", function(e){
    clearTimeout(timeout);
    timeout = setTimeout(func, 600);
});

它完美无缺。

我会寻找计时器/延迟逻辑本身以外的其他地方。此时，如果我是你，我会开始在所有这些函数中放置单独的控制台.log调用，并确保它们仅在您期望时才被调用。

相关文章：