jquery - 防止jquery多次点击功能

Question

是否有机会调整我的代码，以便当有人单击按钮时代码只会执行一次？不像用户单击该按钮的次数那么多。谢谢
HTML

<button class="click_me">Click</button>
<div class="example">Some text</div>

CSS

.example{
    width:100px;
    padding:5px 5px;
    background:skyblue;
    color:white;
    display:none;
}

JQUERY

$(".click_me").click(function(){
    $(".example").slideDown();
    $(".example").delay("2000").slideUp();
});

另请查看我的 Fiddle !

$(".click_me").click(function() {
  $(".example").slideDown();
  $(".example").delay("2000").slideUp();
});

.example {
  width: 100px;
  padding: 5px 5px;
  background: skyblue;
  color: white;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click_me">Click</button>
<div class="example">Some text</div>

Answer 1

您可以使用.one() method 。这样做时，该函数仅执行一次。

来自jQuery docs :

The .one() method will attach a handler to an event for the elements. The handler is executed at most once per element per event type.

Updated Example

$(".click_me").one('click', function(){
    $(".example").slideDown();
    $(".example").delay("2000").slideUp();
});