觸發一次后刪除If語句

Question

無論如何， if將if語句觸發一次，是否可以刪除它？

我有一個菜單容器，該容器在頁面加載時顯示，並且需要它，因此當用戶滾動1px時，它會滑走。 我不希望瀏覽器不斷跟蹤scrollTop()方法，因為這樣做會降低性能。

一次使用后刪除或取消if語句的最佳方法是什么？

下面是代碼，我在這里有一個Codepen： http ://codepen.io/emilychews/pen/evbzMQ

 jQuery(document).ready(function($) { $(window).scroll(function() { if ($(document).scrollTop() > 1) { $('.menubox').css('left', '-25%'); } }); $('.mybutton').on('click', function() { $('.menubox').css('left', '0%'); }); }); 

 body { margin: 0; padding: 0; height: 200vh; } .menubox { top: 100; position: fixed; width: 20%; height: 100%; background: red; padding: 10px; color: white; transition: all 1s; } .mybutton { position: fixed; left: 40%; top: 50px; padding: 5px 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="menubox">Menu Box</div> <button class="mybutton">menu</button> 

Answer 1

您可以在if語句中調用off()來刪除事件處理程序。

還要注意，如果您擔心性能，則可以對事件處理程序進行反跳操作，以便僅在滾動停止N毫秒后才執行邏輯：

var scrollTimer;

$(window).scroll(function() {
  clearTimeout(scrollTimer)
  scrollTimer = setTimeout(function() {
    if ($(document).scrollTop() > 1) {
      $('.menubox').css('left', '-25%'); 
      $(window).off('scroll');
    }
  }, 150);
}); 

Answer 2

聽起來您實際上有兩個條件。 一個基於滾動位置，另一個基於要跟蹤的某種狀態。 因此，只需添加一個變量來跟蹤該狀態。 也許像：

var scrolled = false;

$(window).scroll(function() {
    if ( !scrolled && $(document).scrollTop() > 1) { // check the state
        $('.menubox').css('left', '-25%');
        scrolled = true; // update the state
    }
}); 


$('.mybutton').on('click', function() {
    $('.menubox').css('left', '0%');
    scrolled = false; // don't forget to reset the state
});