setTimeout（）不適用於jQuery（this）

我在這裏有這段腳本，我想滑動我的ul元素，然後在執行完上滑之後，我想刪除CSS原因的「開放」類。我究竟做錯了什麼？setTimeout（）不適用於jQuery（this）

jQuery(this).parent().children("ul").slideUp(500); 
 
setTimeout(function(){ 
 
    var elementToRemove = jQuery(this).parent(); 
 
    elementToRemove.removeClass("open"); 
 
}, 500);

來源

2017-02-05 sklrboy

如果您打算在slideUp動畫完成後調用匿名函數，請使用回調代替對'setTimeout'定時器進行硬編碼。如果您將來更新動畫持續時間，則不必在兩處更新「500」。 – Terry

[This「關鍵字如何工作？]（http://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work） – Andreas

this裏面你的回調函數是指全局對象，而不是事件的目標。

兩個解決方案：

使用箭頭函數（保留this上下文）：

jQuery(this).parent().children("ul").slideUp(500); 
setTimeout(() => { 
    var elementToRemove = jQuery(this).parent(); 
    elementToRemove.removeClass("open"); 
}, 500);

或保存的鏈接this對象：

jQuery(this).parent().children("ul").slideUp(500); 
let that = this; 
setTimeout(function(){ 
    var elementToRemove = jQuery(that).parent(); 
    elementToRemove.removeClass("open"); 
}, 500);

來源

2017-02-05 11:10:17 Sirko

可能重複！不知道「箭頭功能」，謝謝你讓我知道！ – sklrboy

應該注意箭頭功能沒有完整的瀏覽器支持 – charlietfl

解決方案1 

使用bind上下文傳遞給函數

jQuery(this).parent().children("ul").slideUp(500); 

var func = function(){ 
    var elementToRemove = jQuery(this).parent(); 
    elementToRemove.removeClass("open"); 
} 
setTimeout(func.bind(this),500);

溶液2

jQuery(this).parent().children("ul").slideUp(500); 
var self = this; 
setTimeout(function(){ 
    var elementToRemove = jQuery(self).parent(); 
    elementToRemove.removeClass("open"); 
}, 500);

來源

2017-02-05 11:16:54

jQuery的動畫允許附加的可選pararameter（回調）稱爲在將被執行一次的文檔complete動畫完成。您可以這樣使用它：

jQuery(this).parent() 
      .children("ul") 
      .slideUp(500, function(){ 
       var elementToRemove = jQuery(this).parent(); 
       elementToRemove.removeClass("open"); 
      });

來源

2017-02-05 11:25:00

setTimeout（）不適用於jQuery（this）

回答

相關問題