函數被調用多次時，調整窗口[JQuery的]

Question

這裏就是我想要做的事：

- 當窗口寬度小於700像素和用戶在底部點擊灰色條紋上，一個紅色的菜單向上滑動並停留在那裏。

- 當窗口寬度大於700px時，用戶單擊灰色條時不會發生任何事情。

我已經將一個resize（）事件綁定到瀏覽器窗口，以便在頁面加載後用戶調整窗口大小時檢測到更改。

這裏是我的codepen：http://codepen.io/Chiz/pen/xwrpWG （直到你讀下面不要點擊呢！）

這裏是如何產生奇怪的問題：

1）單擊上面的Codepen鏈接之前，將窗口大小調整到700px以下，然後單擊上面的我的codepen（如果不確定700px有多寬，請將它變小）

2）單擊底部的灰色條。一個紅色的矩形應該滑動並停止。 再次點擊。紅色矩形滑回。一次又一次點擊，紅色矩形每次都會上下滑動。這是正確的行爲。

3）現在，無需重新加載或刷新codepen即可調整瀏覽器寬度。 只要窗口調整大小，您可以使其更寬或更窄，無關緊要。 再次點擊灰色條。出現錯誤。紅色長方形向下滑動MULTIPLE次！

有時，您調整的次數越多，它滑動的次數就越多！ ：-O

我該如何解決這個問題？

//bind click event to the gray bar on page's first load 
 
showMenuIfWidthSmallerThanSevenHundred(); 
 

 
//detect window resizes 
 
$(window).resize(function() { 
 
    showMenuIfWidthSmallerThanSevenHundred(); 
 
}); 
 

 

 
function showMenuIfWidthSmallerThanSevenHundred() { 
 
    if ($(window).innerWidth() <= 700) { 
 
    $("div").on("click", function() { 
 
     /* make menu fill the entire screen that is 
 
     not occupied by the gray bar */ 
 
     var nMenuHeight = $(window).height() - $(this).height(); 
 

 
     $(".menu").height(nMenuHeight); 
 

 
     /* position the menu so that the bottom of the menu 
 
     touches the top of the gray bar */ 
 
     $(".menu").css("bottom", $(this).height()); 
 

 
     //make menu slide upwards/downwards 
 
     $(".menu").slideToggle(); 
 
    }); 
 
    } 
 
}

div { 
 
    width: 100%; 
 
    height: 53px; 
 
    background-color: gray; 
 
    position: absolute; 
 
    bottom: 0; 
 
} 
 
.menu { 
 
    width: 100%; 
 
    height: 100px; 
 
    background-color: #F08080; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div></div> 
 

 
<div class="menu"></div>

Answer 1

OK，後閱讀這裏的提示和回覆，我想我把這個s ***釘在了下面：

http://codepen.io/Chiz/pen/rOwPEm

如果窗口寬度小於700px並單擊灰色條，則紅色矩形向上滑動。當再次點擊時，紅色矩形滑落。

如果窗口寬度超過700px，單擊灰色條時不會出現紅色矩形。 如果用戶將瀏覽器寬度調整爲700px以上時可見紅色矩形，則紅色矩形將向下滑動，因爲寬度已超過700像素。

我愛Underscore.js！乾杯!

$(window).resize(_.debounce(function() { 
 
    showMenuIfWidthSmallerThan7Hundred(); 
 
}, 500)); 
 

 
function showMenuIfWidthSmallerThan7Hundred() { 
 
    if ($(window).innerWidth() <= 700) { 
 
    $("div").off("click.mynamespace").on("click.mynamespace", function() { 
 
     /* make menu fill the entire screen that is 
 
     not occupied by the gray bar */ 
 
     var nMenuHeight = $(window).height() - $(this).height(); 
 

 
     $(".menu").height(nMenuHeight); 
 

 
     /* position the menu so that the bottom of the menu 
 
     touches the top of the gray bar */ 
 
     $(".menu").css("bottom", $(this).height()); 
 

 
     //make menu slide upwards/downwards 
 
     $(".menu").slideToggle(); 
 
    }); 
 
    } 
 
    //if window is wider than 700px, unbind the click event and slide the menu back down 
 
    else { 
 
    //check if menu is shown. if yes, make it disappear 
 
    if ($(".menu").css("display") != "none") { 
 
     $(".menu").slideToggle(); 
 
    } 
 

 
    $("div").off("click.mynamespace"); 
 
    } 
 
}

div { 
 
    width: 100%; 
 
    height: 53px; 
 
    background-color: gray; 
 
    position: absolute; 
 
    bottom: 0; 
 
} 
 
.menu { 
 
    width: 100%; 
 
    height: 100px; 
 
    background-color: #F08080; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> 
 

 
<div></div> 
 

 
<div class="menu"></div>

Answer 2

你可以去抖動觸發事件較少倍。我推薦保羅·愛爾蘭的智能消除器，它使用了這個目的。

http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

AS教程說，你可以用這個簡單的監聽器使用方法：

$(window).smartresize(function(){ 
    // code that takes it easy... 
}); 

可以抖的噸觸發事件，如調整大小，滾動等