不能通过参数this.style里面settimeout

Question

是什么原因this.style is undefined？它只发生在我将它包装在settimeout函数中时。通常我输入参数和道具应该被定义。这里不是这种情况。我尝试将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) 
    } 
});