Question

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 FIDDLE :(也检查控制台） https://jsfiddle.net/7con1p04/1/

Answer 1

这里有一个jsFiddle，可以将您的功能简化为计时器/鼠标移动延迟（相同的代码，其他所有内容都被删除）：

var timeout;

function func(){
    console.log('fire');
    clearTimeout(timeout);
}

document.addEventListener("mousemove", function(e){
    clearTimeout(timeout);
    timeout = setTimeout(func, 600);
});

它完美无缺。

除了定时器/延迟逻辑本身，我还要看其他地方。此时，如果我是你，我会开始在所有这些功能中分别调用console.log，并确保只在你预期时调用它们。

计时器不会停止触发功能

1 个答案: