如何通过单击按钮打开/关闭功能？

Question

I have been working in a mini-game-project (Simons game) that many of you may know. Where the computer plays a random sequence of buttons in which players have to follow to go to the next level in the game eg: [one click first round, two clicks second round..].

I already did all the button effects as well as make the machine plays buttons randomly in a range of ten rounds. So, what I would like to do is use a button to turn on and off the function that makes the computer clicks By Itself using a button.

I already tried using the jQuery function $(startButton).on('click', clickByItself); alone but it did not worked.

$(document).ready(function() {

  //four variables representing its button effects 
  //button blue effect
  var blueButtonEffect = code here;

  var greenButtonEffect = code here;

  var redButtonEffect = code here;

  var yellowButtonEffect = code here;

  //to be used on the buttonEffects()/clickByItself()
  var arr = [blueButtonEffect, redButtonEffect, greenButtonEffect, yellowButtonEffect];
  let enabled = true;
  let times = 0;
  //makes button effects play itself randomly 
  function clickByItself() {
    let random = Math.floor(Math.random() * arr.length);
    $(arr[random]).click();
    if (++times < 10) {
      setTimeout(function() { clickByItself(times); }, 1000);
    }
  }
  clickByItself();

  function turnOnTurnOff() {
    if (enabled == true) { //TRYING TO TURN ON/OFF THE FUNCTION ON BUTTON CLICK..
      $(startButton).on('click', clickByItself);
    }else{
      $(startButton).on('click', clickByItself);
    }
  }

Now, I am trying to use a function turnOnTurnOff() to see whether I could do the effect of turning on and off with the click of a the startButton . Thank you.

Answer 1

Give this a try:

function clickByItself() {
    if(enabled) {
        let random = Math.floor(Math.random() * arr.length);
        $(arr[random]).click();
        if (++times < 10) {
            setTimeout(function() { clickByItself(times); }, 1000);
        }
    }
}
clickByItself();

function turnOnTurnOff() {
    if (enabled) {
        enabled = false;
    } else {
        enabled = true;
        clickByItself();
    }
}

$(startButton).click(function() {
    turnOnTurnOff();
});

Answer 2

You could do it in multiple ways. One is to use setInterval instead of setTimeout and store it inside a variable. When you need to stop it, just call clearInterval .

Answer 3

You can use .off() method of jQuery to remove an event listener as follows. I added two div s for better demonstration.

One button binds and unbinds (toggles) the click handler of the second button using jQuery's .on() & .off() . When the click handler is bound to the second button, clicking it will update the div with a number. When the click handler is unbounded from the second button, clicking the second button will do nothing. Two lines of interest in the JavaScript code below are decorated with a comment each. The rest is for demonstration.

 window.enabled = false; window.count = 1; // Initialize the view (for demo) $(function() { $('#switchIndicator').html(`<p>${enabled ? 'Switch is ON' : 'Switch is OFF'}</p>`); $('#btn').html(enabled ? 'You can click me :-)' : 'You CANNOT click me'); }); // Toggle click functionality using jQuery's .on() & .off() methods function toggle() { enabled = !enabled; if (enabled) { // Line of interest #1: jQuery .on() $('#btn').on('click', handleClick); } else { // Line of interest #2: jQuery .off() $('#btn').off('click', handleClick); } $('#switchIndicator').html(`<p>${enabled ? 'Switch is ON' : 'Switch is OFF'}</p>`); $('#btn').html(enabled ? 'You can click me :-)' : 'You cannot click me :-(('); $('#btn').removeClass(enabled ? 'disabled' : 'enabled').addClass(enabled ? 'enabled' : 'disabled'); } function handleClick() { $('#counter').append(` ${count++}`); }

 /* CSS */ #btn.enabled { background-color: greenyellow; } #btn.disabled { background-color: lightgray; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="switchIndicator"></div> <button id="switch" onclick="toggle()">On/OFF Switch</button> <button id="btn"></button> <div id="counter"></div>