javascript HTML 脚本不断运行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29237809/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML script constantly running?
提问by Fyrebend
Is there a way to have javascript coffee always be checking the document? What I mean by this is if I have "if" statements, it will always check the document to see if it needs to run the script...
有没有办法让 javascript 咖啡总是检查文档？我的意思是，如果我有“if”语句，它将始终检查文档以查看它是否需要运行脚本...
Also, it needs to not be a function that needs to be called. Here is some simple example of what I'm asking.
此外，它不必是需要调用的函数。这是我要问的一些简单示例。
<button id="btn1">random button</button>
<button id="btn2" onclick="hide()">hide</button>
<script>
function hide() {
document.getElementById("btn1").setAttribute("hidden", "true")
}
</script>
<script>
if (document.getElementById("btn1").hidden === true) {
document.write("random button is hidden")
}
</script>
How would I do something likethis? I don't want this specifically, this is just an example.
我怎么会做一些像这样？我不想要这个，这只是一个例子。
In the code,a button hides another one, and there is script always checking if it is hidden. Please let me know.
在代码中，一个按钮隐藏了另一个，并且有脚本总是检查它是否被隐藏。请告诉我。
edit
编辑
I see other people's answers, but it's not what I need. Is it possible to have functions constantly run without being called?
我看到其他人的答案，但这不是我需要的。是否可以让函数在不被调用的情况下不断运行？
回答by Madara's Ghost
JavaScript features what's called events. Any DOM element may emit events in response to user interaction. For example:
JavaScript 具有所谓的事件功能。任何 DOM 元素都可以响应用户交互发出事件。例如：
var button2 = document.querySelector('#btn2');
// what event function to be called
// vvvvvvv vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
button2.addEventListener('click', function runThisOnButtonClick(event) {
// Code in here will only run when the button is clicked.
hideInSomeFashion(button1);
});
If you want a more general view of the DOM, recent browsers have what's called a MutationObserver.
如果你想更全面地了解 DOM，最近的浏览器有一个叫做MutationObserver 的东西。
In your case, something like this [example]:
在你的情况下，像这样[示例]：
// Older versions of Webkit have this under a prefix
var MutationObserver = MutationObserver || WebkitMutationObserver;
var myMo = new MutationObserver(function(mutations) {
// handleMutation in this case is a function that takes
// a mutation and performs an action. Note that in this
// case, return values are ignored.
mutations.forEach(handleMutation);
});
myMo.observe(button1, {
attributes: true // Observe changes in attributes
});
function handleMutation(mutation) {
console.log("Hidden?", mutation.target.hidden);
}
MutationObservercan observe a common ancestor and all of its descendants for changes as well.
MutationObserver也可以观察一个共同的祖先及其所有后代的变化。
回答by Bryan Way
Although I strongly recommend finding another way to do what you want, if possible, I think this is what you're asking for.
尽管我强烈建议您寻找另一种方式来做您想做的事，但如果可能的话，我认为这就是您所要求的。
setInterval(function() {
if(document.getElementById("btn1").hidden === true) {
// Button is hidden
}
}, 1000); // Wait 1000ms before running again
