如何在jquery中延遲調用自定義函數

我創建了一個函數，顯示帶有用戶信息的彈出框，名爲'displayUserinfo'（有很多代碼，所以我想沒有必要粘貼它）。當用戶點擊$('.avatar')類，函數啓動：

$('.avatar').on('click', displayUserinfo);

而這部分工作perfctly。現在我想添加代碼，當用戶將鼠標懸停在$('.avatar')上2秒鐘時，將啓動相同的功能，但這是功能未啓動的地方（console.logs用於測試它是否正常工作，它們都是如此）：

var timer; 
var delay = 2000; 

$('.avatar').hover(function() { 
    console.log('test1'); 
    timer = setTimeout(function() { 
     console.log('test2'); 
     $('.avatar').displayUserinfo; 
    }, delay); 
}, function() { 
    clearTimeout(timer); 
    console.log('test3'); 
});

我試過$(this).displayUserinfo，但也沒有工作。

有誰能幫我一下嗎？

來源

2015-01-05 Pejs

Apropos不是很好，我不能*站*所有這些東西，當我只是移動我的鼠標（或停止移動它兩秒鐘）彈出。請等待我點擊。（我在看着你，谷歌，以及你在Gmail中愚蠢的18種不同懸停彈出窗口，還有你，微軟，以及Windows 7和8中真正糟糕的任務欄懸停行爲。） –

哈哈，好吧，我會考慮這個評論，可能是一個有效的，因爲筆記本電腦正在轉向觸摸屏。儘管如此，我想學習如何使這個東西工作 – Pejs

是的，關於觸摸屏的好點！ –

這條線：

$('.avatar').displayUserinfo;

...查找與avatar類中的任何元素和包裝他們在一個jQuery對象，然後訪問該jQuery對象上displayUserinfo屬性（這可能是undefined） —然後不做任何事情。例如，它不會調用一個函數（$()除外）。

我想你也許想：

var hovered = this;

只是hover回調裏面，然後這個setTimeout回調中：

displayUserinfo.call(hovered);

調用displayUserinfo功能，使用已徘徊元素作爲this通話期間（方式on做的）。

原位：

var timer; 
var delay = 1000; 

$('.avatar').hover(function() { 
    var hovered = this; 
    timer = setTimeout(function() { 
     console.log('test2'); 
     displayUserinfo.call(hovered); 
    }, delay); 
}, function() { 
    clearTimeout(timer); 
});

附註：在你的代碼延遲只有一秒鐘，而不是兩個。

來源

2015-01-05 08:57:57

神奇，完全按照我的意願工作（我也修正了旁註）。只是一個簡單的問題，如果我想在將鼠標從Popup（NOT avatar）移開之後取消「displayUserinfo」函數（使彈出窗口消失），它會是相同的懸停函數還是不同的函數，因爲現在我沒有尋址$（'。avatar'），但$（'。popup'）？ – Pejs

@Pejs：對，不一樣。 –

非常感謝您先生的幫助，祝您有個美好的一天 – Pejs

如何在jquery中延遲調用自定義函數

回答

相關問題