JavaScript豆知識6_setTimeout

 

setTimeoutということで時計の写真を乗せました。安物ですが見やすくて気温計もついている優れものです。安物ゆえに気温は雰囲気程度ですが、気持ちは違います。

JavaScriptを書いていて、マウスカーソルが画像の上から1秒以上離れたら表示を消す、みたいな処理を書きたいことがあると思います。単純にmouseleaveイベントにsetTimeoutを乗せるとすでに走っているものを止められなくなって困った、なんて経験ありませんか？僕はあります。

その時はフィールド変数にイベントが呼ばれた回数をカウントして…みたいな処理を作ったのですが、標準でｽﾀｲﾘｯｼｭに書ける方法が用意されていました。もちろん、setIntervalとclearIntervalでも使えます。

//setTimeoutを代入するフィールド変数
let fncSTO = null;
    
//elm0のmouseleaveイベントに関数をバインド
elm0.addEventListener('mouseleave',()=>{
    	
    //setTimeout関数はカウントダウン中だとtypeofでnumberを返すようです
    if(typeof fncSTO === 'number'){
        clearTimeout(fncSTO);
    }
        
    //1秒後にelm1を非表示にする処理
    fncSTO = setTimeout()=>{
    	elm1.style.display = 'none';
    },1000);
        
});
    
    

この作り方はMDNに書いてありました。当時の僕が見つけられなかったのは探し方が悪かっただけですが、欲しい内容がアッサリ書いてあったり便利なプロパティが用意されていたりするので、文章量に圧倒されて敬遠するのはもったいですよ！

…聞いてるか普段の自分！！