タイマは機能の起動を停止しません

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 


} 

私がやっていることは、実際には機能しませんが、かなりシンプルです。ユーザーが自分のビデオ上でマウスを動かし、特定の場所で0.5秒間停止すると、mainFunctionという関数が一度呼び出されます。次回はマウスを動かしてスポットに止まるが、再び起こるはずだが、代わりにmainFunctionの発射を止めることはない。いくつかの理由でjQueryを使用することはできませんので、もしあなたが助けることができれば、ライブラリがなくてもどうぞ。

JS FIDDLE：（あまりにコンソールを確認してください） https://jsfiddle.net/7con1p04/1/

Answer 1

ここだけのタイマ/ MouseMoveの遅延（同じコード、他のちょうどすべて取り除か）までご機能を沸騰jsFiddleです：

var timeout; 

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

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

これは完璧に動作します。

私はタイマー/遅延ロジックそのもの以外の部分を見ています。この時点で私はあなただったならば、私はそれらのすべての機能に別々のconsole.log呼び出しを入れて、あなたが期待しているときだけ呼び出されることを確認します。