不能通過參數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) 
    } 
});