2011-12-02 98 views
2

我有一個面板誰13秒後自動滑動。我用jquery.delay()做了這個。 如果我想通過單擊事件手動滑動面板,則會出現此問題。看起來,點擊事件正在等待延遲的效果結束。刪除延遲()點擊事件

我可以用什麼來代替delay()?

我的代碼:

延遲部分:

$('#menu').delay(13000).hide("slide", { direction: "right" }, 400, function() { 
      if ($('#menu').is(':hidden')) { 
       $('#trigger').removeClass("triggerdroiteExtended"); 
       $('#trigger').addClass("triggerdroiteCollapsed"); 
       $.cookie('rightfold', 'collapsed', { path: '/' }); 
      } 
     }); 

Click事件部分:

$('#triggerdroite').click(function() { foo 
}); 

回答

1

這是你可能會更好過使用setTimeoutclearTimeout的地方。從delay docs

.delay()方法是最好的延遲排隊的jQuery效果。因爲它是有限的  — 它不提供取消延遲的方法.delay()不是JavaScript的原生setTimeout函數的替代品,它可能更適合某些用例。

(我的重點。)

因此,在這種情況下:

(function() { 
    var slideTimer = 0; 
    slideTimer = setTimeout(function() { 
     $('#menu').hide("slide", { direction: "right" }, 400, function() { 
       if ($('#menu').is(':hidden')) { 
        $('#trigger').removeClass("triggerdroiteExtended"); 
        $('#trigger').addClass("triggerdroiteCollapsed"); 
        $.cookie('rightfold', 'collapsed', { path: '/' }); 
       } 
      }); 
    }, 13000); 
    $('#triggerdroite').click(function() { 
     if (slideTimer) { 
      clearTimeout(slideTimer); 
      slideTimer = 0; 
     } 

     // ... 
    }); 
})(); 

(外匿名函數只是一個佔位符,我假設你的代碼是已經有一些功能,防止內部創建全局變量)。

注意我使用0作爲「無定時器運行」值。 0不是setTimeout的有效返回值,所以它是一個有用的標誌。

當然,不是像上面那樣將它存儲在一個變量中,而是可以使用data將它存儲在#menu元素本身上。

+0

thnks它工作正常,但您反轉SetTimout()的參數它是函數首先和延遲後。 – bAN

+0

@bAN:OMG,固定。 (之前我也叫'clearTimeout'' cancelTimeout',這是一個非常漫長的一天。)很高興幫助! –