this.style 未定义
的原因是什么?仅当我将其包装在 settimeout 函数中时才会发生。通常我会输入参数并定义 prop。这里的情况并非如此。我尝试将 prop 作为参数传递给我的 settimeout 函数,但这也没有完成任务。为什么它是未定义的?我可以做什么来解决这个问题?
var clicked = false
function filter(action, getTag, elem, prop, play, reverse, durationP, durationR) {
if (typeof durationP && durationR === 'undefined'){
var durationP = 1000;
durationR = 1000;
};
var source = {_id: document.getElementById(elem),
_class: document.getElementsByClassName(elem)}
source[getTag].addEventListener(action, function() {
if (clicked == false) {
setTimeout(function() {
this.style[prop] = play
clicked = true
}, durationP)
}
else {
setTimeout(function() {
this.style[prop] = reverse
clicked = !clicked
}, durationP)
}
})
}
filter('click', '_id', 'case', 'filter', 'blur(40px)', 'blur(0px)', 1500, 3000)
最佳答案
发生这种情况是因为您处于不同的环境中。
在超时函数中,this
实际上指的是当前超时函数,而不是触发事件的源元素。
你可以这样解决这个问题:
source[getTag].addEventListener(action, function() {
var self = this;
if (clicked == false) {
setTimeout(function() {
self.style[prop] = play
clicked = true
}, durationP)
}
else {
setTimeout(function() {
self.style[prop] = reverse
clicked = !clicked
}, durationP)
}
});
或者您可以使用 .bind 语法将上下文传递给函数:
var notClickedFunction = function() {
this.style[prop] = play
clicked = true
};
var clickedFunction = function() {
this.style[prop] = reverse
clicked = !clicked
};
source[getTag].addEventListener(action, function() {
if (clicked == false) {
setTimeout(notClickedFunction.bind(this), durationP)
}
else {
setTimeout(clickedFunction.bind(this), durationP)
}
});
关于javascript - 无法在 settimeout 内将参数传递给 this.style,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32512511/