jQuery的防抖動調整大小

In this example here，我試圖讓H1標籤的行爲像一個可點擊的按鈕時，它的移動模式。當它返回到桌面模式時，我需要確保該按鈕不再可點擊。jQuery的防抖動調整大小

按鈕時工作正常的頁面最初加載在「移動模式」，以確保在移動模式下，該按鈕將僅觸發每一次點擊。但是，在調整大小之後，它不會取消綁定點擊，並且2.它似乎再次多次啓動。

我知道我在做這一點的順序或低效。歡迎任何其他更好的方法來做到這一點！

這裏是我的代碼：

<html> 
<head> 
<style type="text/css"> 
.mobile-mode { background: pink; } 
.mobile-mode h1 { background: yellow; padding: 10px; text-align: center; font-size: 16px; line-height: 20px; cursor: poi 
</style> 
<script type="text/javascript" src="/_jquery/jquery-1.8.3.min.js"></script> 
<script type="text/javascript" src="/_jquery/jquery.debouncedresize.js"></script> 
<script type="text/javascript" src="/_jquery/jquery.throttledsize.js"></script> 
<script type="text/javascript"> 
$(window).bind("debounced", function() { 
     var viewportWidth = $(window).width(); 
     $('.v-width span').html(viewportWidth); 
     if (viewportWidth < 640) { 
       $('.device span').html('mobile'); 
       $('body').addClass('mobile-mode'); 
       $('h1').click(function() { 
         $('.results').append('<li>Hey!</li>'); 
       }); 
     } else { 
       $('.device span').html('desktop'); 
       $('body').removeClass('mobile-mode'); 
       $('h1').unbind(); 
     } 

}); 
</script> 
</head> 
<body> 

<div class="v-width">viewport width: <span></span></div> 

<div class="device">device: <span></span></div> 

<h1>Contextual Header Button</h1> 

<ol class="results"></ol> 

</body> 
</html>

來源

2013-02-19 Marc P

我是個白癡：我錯誤地調用的函數爲「反跳」的時候，我應該把它叫做「debouncedresize」。

來源

2013-02-19 19:37:47

jQuery的防抖動調整大小

回答

相關問題