How to disable function on click event?

debugcn Published at Dev

can

I have a button which toggle 2 divs. And a function which do the same thing after 5 seconds. But when the user click on the button, the function also works. How can I disable the function when the button is clicked?

This is what I want: If click on .turn-button, disable function show_back.

My code:

 $(document).ready(function() {

    // Toggle
    $(".toggle-class").hide();

    $(".turn-button").click(function() {
        $(".toggle-class").slideToggle(500);
        $(".toggle-class-back").slideToggle(500);
    }); 

    // Show back after 7 seconds
    $(function(){
       function show_back(){
            $(".toggle-class").slideToggle(500);
            $(".toggle-class-back").slideToggle(500);
       };
       window.setTimeout( show_back, 5000 ); // 5 seconds
    });

});

arul prince

you can use .off() function to disable click event

$("p").on("click", function() {
  $(this).css("background-color", "red");
  $("#clicked").html("clicked");
});
$("button").click(function() {
  $("p").off("click");
  $("#clicked").html("disabled");
});

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

<head>
</head>

<body>
  <p> Test Data</p>
  <div id="clicked"></div>

  <button>Click</button>
</body>

</html>

Click this paragraph to change its background color and changed div text to clicked.

Click the button below and then click on this paragraph (the click event is removed).

Collected from the Internet

Please contact [email protected] to delete if infringement.