本文介绍了不能在setInterval中使用这个的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
似乎不能在setInerval
函数内使用this
。为什么会这样呢?什么是优雅的解决方案?
<html>
<script>
var something = function(tMessage){
this.message = tMessage;
};
something.prototype = {
start : function(counter){
document.getElementById('result').innerHTML += this.message + "+++<br />";
var looper = setInterval(
function(){
// This is printing "undefined"
document.getElementById('result').innerHTML += this.message + "<br />";
if(!counter--)
clearInterval(looper);
},
20
);
}
};
window.onload = function(){
var e = new something("hi");
e.start(2);
}
</script>
<body>
<div id="result"></div>
</body>
</html>
编辑
谢谢您的回答!!但有谁能解释一下发送参数、设置和额外变量之间的区别吗?有内存问题吗?
推荐答案
这里的问题是,当您的函数被调用时,this
引用全局对象。要保留当前作用域,您可以关闭:
var looper = setInterval(
(function(scope){
return function(){
// This will no longer be printing "undefined"
document.getElementById('result').innerHTML += scope.message + "<br />";
if(!counter--)
clearInterval(looper);
};
})(this),
20
);
我不会挥手并试图解释闭包(我仍在完全掌握它),而是将您引向这个极好的答案:https://stackoverflow.com/a/111200/1726343
这篇关于不能在setInterval中使用这个的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!