Prevent jquery from multiple click function

Is there a chance to adjust my code so when someone clicks button code would be executed only once? Not as many times as user clicks that button. Thanks 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();
});

Also check out my 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>

solution

You could use the .one() method. In doing so, the function is only executed once.

From the 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();
});