Javascript，总之做一个'whileFocused' eventListener？（没有JQuery）

Question

有没有办法在 dom 元素上实现或模拟 'while focused' 绑定？假设每秒记录一条消息，在发生焦点时开始，但在离开时停止。

考虑到这一点：

myinput.addEventListener("focus", function(){
    setInterval(function(){
        console.log('Mouse on:' + this)
    }, 1000);
});

我唯一能想到的就是使用全局变量，例如：

var isfocused = false;
myinput.addEventListener("focus", function(){
    isfocused = true;
    setInterval(function(){
        if (isfocused)
            console.log('Mouse on:' + this)
    }, 1000);
});

然后为 onblur 添加另一个侦听器以切换 'isfocused'

但那种感觉……完全不对。加上 setInterval 会继续在后台触发吗？

Answer 1

window.setInterval returns 您的间隔回调的 ID。然后您可以将该 id 传递给 window.clearInterval(id) 以停止它。像

var intervalId;
myinput.addEventListener("focus", function(){
    intervalId = setInterval(function(){
        console.log('Mouse on:' + this)
    }, 1000);
});
myinput.addEventListener("unfocus", function(){
    clearInterval(intervalId);
});

Answer 2

@Scott Schwalbe 略有改进

(function(){
    var intervalId;
    myinput.addEventListener("focus", function(){
        intervalId = setInterval(function(){
            console.log('Mouse on:' + this)
        }, 1000);
    });
    myinput.addEventListener("blur", function(){
        clearInterval(intervalId); 
    });
})();

1) 用Immediately Invoked Function Expression包裹起来，保持全局变量space纯净

2) 'unfocus' 事件真的是 'blur'

Javascript，总之做一个'whileFocused' eventListener？（没有JQuery）

Javascript, anyway to do a 'whileFocused' eventListener? (No JQuery)

javascript

input

onfocus

onblur

Javascript，总之做一个'whileFocused' eventListener？ （没有JQuery）

Javascript, anyway to do a 'whileFocused' eventListener? (No JQuery)

javascript

input

onfocus

onblur

Javascript，总之做一个'whileFocused' eventListener？（没有JQuery）