javascript - 无法在 settimeout 内将参数传递给 this.style

Question

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) 

Answer 1

发生这种情况是因为您处于不同的环境中。

在超时函数中，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)
    }
});