jQueryのクリックイベントの制御について

前提・実現したいこと

今jQueryで神経衰弱を作っていて、カードを選択してカードの番号が一致しなければカードを「?」にするのですが、
そのときに1秒間他のカードをクリックできないようにしたいです。
アドバイスのほどよろしくお願いします。

発生している問題・エラーメッセージ

今はカードが一致せずに「?」になる時、間髪入れずに次のカードが選択できます。

該当のソースコード

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title></title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<ul class="lists clearfix"></ul>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
      
//カードを開く
function open($card){
  $card.css('pointer-events','none').text($card.data('num'));
}
// カードを閉じる
var returnSec = 500;
function close($card){
  $card.css('pointer-events','').text('?');
}
// カードを比較
function compare($card){
  var card1 = $('.first');
  var card2 = $card;
  var num = 'num';
  var firstNum = card1.data(num);
  var secondNum = card2.data(num);
  var unopened = 'unopened';
  var first = 'first';
  var returnSec = 1000;
  
  if(card1.length == 0){
    $card.addClass(first);
  } else {
    card1.removeClass(first);
    if(firstNum == secondNum){
      card1.removeClass(unopened);
      card2.removeClass(unopened);
      if($('.' + unopened).length == 0){
        alert('Game Over');
      }
    } else {　　　
      close(card1);
      close(card2);
      //今はここにクリック制御のコードを書いています
      $('.lists li').css('pointer-events','none');
      setTimeout(function(){
        $('.lists li').css('pointer-events','');
      },returnSec);

    }
  }
}
$(function(){
  var cardNum = [];
  var totalCard = 16;
  
  for (var i = 1; i <= totalCard/2; i++){
    cardNum.push(i,i);
  }
  cardNum.sort(function(){
        return Math.random() - Math.random();
      }).map(function(num){
        return "<li class='unopened' data-num='" + num + "'>?</li>";
      }).forEach(function(element){
        $(".lists").append(element);
      });
  $('.lists li').click(function(){
    var $openedCard = $(this);
    open($openedCard);
    setTimeout(function(){
      compare($openedCard);
    }, returnSec);
  });
});

</script>
</body>
</html>

m.ts10806

2018/04/20 00:17 編集

試してなくて斜め読みなので回答には書きませんが、var returnSec = 1000;　の　var をはずしてみては？

sousuke

2018/04/20 00:17

「自分でこうしてみた」というものはないんですか？「１秒まつ」という仕様が確定しているのですから何かしらできると思いますが

行動規範の内容に同意します

回答3件

ベストアンサー

そんな場合はlodashのthrottleを使うと楽ですよ。
「指定msの間、指定した関数の実行を制限する」という関数を定義できます。
それをjQueryのclickイベントに仕込めば実装完了です。
https://jsfiddle.net/so87rkh/xpvt214o/165138/

あわせて_.debounceもセットで覚えておくといいでしょう。

追記：
すみません。現状のコード内容をよく読んで動きを確認すると、
ただclickイベントを抑制すればいいという単純な話ではありませんでした。
jsfiddleで修正コードを書いてみたところ、_.throttleの出番はなく、
イベント発生時の条件判定で済む内容となりました。
http://jsfiddle.net/so87rkh/xpvt214o/178234/latest/

投稿2018/04/20 00:52

編集2018/04/23 00:52

so87

総合スコア764

miyabi_pudding

2018/04/20 01:46

なんすかその便利なライブラリ。今まで、制限系の処理は、全部手で書いてましたよ・・・。使います。

ysmd

2018/04/21 05:00

回答ありがとうございます！こんなライブラリがあったんですね。頂いた回答を参考に考えてみたいと思います！

行動規範の内容に同意します

直接的な回答ではありませんが, 例えばクリックする毎に次のクリックを阻むフラグ値を用意しておいて, その内容を元にクリック時の処理の継続・中断を判定させるようにしたら如何でしょうか？

JavaScript
1"use strict";
2{
3	let blockClick = false;
4	document.onclick = e => {
5		if(blockClick){return;}
6		//何らかの処理
7		console.log("clicked");
8		blockClick = true;
9		setTimeout(()=>blockClick = false, 1000);
10	}
11}

で, このような汎用の処理はライブラリ化しておきたいので, 次のようにしてみる.
(あまり検証していないので, 使い方によってはバグがあるかもしれない.)

JavaScript
1"use strict";
2{
3	function blockable(f){
4		let blockClick = false;
5		return function(e){
6			e.block = ms => (blockClick = true, setTimeout(() => blockClick = false, ms));
7			blockClick || f.bind(this)(e);
8		};
9	}
10	document.onclick = blockable((e) => {
11		console.log("clicked");
12		e.block(1000);//同一のイベント処理の発生を1000ms阻む
13	});
14}