Question

我一直在从事许多人可能都知道的小型游戏项目（Simons游戏）。计算机在计算机上随机播放一系列按钮，玩家必须跟随这些按钮进入游戏的下一个级别，例如：[第一轮单击一次，第二轮单击两次。]。

我已经完成了所有按钮效果，并使机器在十轮范围内随机播放按钮。因此，我想做的是使用按钮来打开和关闭使计算机使用按钮自己单击的功能。

我已经尝试过单独使用jQuery函数$(startButton).on('click', clickByItself);，但是没有用。

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

现在，我正在尝试使用函数turnOnTurnOff()来查看是否可以通过单击startButton来实现打开和关闭的效果。谢谢。

Answer 1

您可以通过多种方式进行操作。一种是使用setInterval而不是setTimeout并将其存储在变量中。当您需要停止它时，只需致电clearInterval。

Answer 2

尝试一下：

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 3

您可以使用jQuery的.off()方法删除事件侦听器，如下所示。我添加了两个div，以进行更好的演示。

一个按钮使用jQuery的.on()和.off()绑定和取消绑定（切换）第二个按钮的单击处理程序。当单击处理程序绑定到第二个按钮时，单击该按钮将用数字更新div。当单击处理程序不受第二个按钮的限制时，单击第二个按钮将不执行任何操作。下面的JavaScript代码中有两行有趣的地方，每行都带有注释。其余的用于演示。

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);
    $('#btn').val('You can click me :-)');
  } else {
    // Line of interest (2): jQuery .off()
    $('#btn').off('click', handleClick);
    $('#btn').val('You cannot click me :-((');
  }

  $('#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>

如何在单击按钮时打开/关闭功能？

3 个答案: