【JavaScript】フラグを用いて神経衰弱のカード判定前に３枚目のカードを開かないようにしたい

神経衰弱のルール

動作の流れとしては以下の通りです。
① 16枚のカードの中から「?」と書かれたものをひとつクリック
② そのカードに書かれている「?」が「1」などの数字に変わる
③ もうひとつ「?」と書かれたものをクリックする
④ その要素に書かれている「?」が「1」などの数字に変わる
⑤ ②と④で表示された数字が一致している場合は、開いた数字はそのままで①に戻る。一致していない場合は1秒後に数字が「?」に戻り①にもどる。
⑥ 全ての要素が開かれたときにアラートで「Game Over」

試したこと・発生している問題

フラグを用いているにもかかわらず、カードを判定する前に３枚目のカードが開いてしまいます。
フラグの位置を一通り書いてみましたが、解決策が分からなかったため質問させていただきました。
該当のソースコードをどのように修正すれば良いかを教えていただけると嬉しいです。
※ソースコードは動作します

該当のソースコード

html
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6<meta name="format-detection" content="telephone=no">
7<title></title>
8<link rel="stylesheet" href="css/reset.css">
9<link rel="stylesheet" href="css/base.css">
10<link rel="stylesheet" href="css/style.css">
11</head>
12<body>
13<ul class="lists clearfix"></ul>
14<script type="text/javascript" src="js/jquery.js"></script>
15<script type="text/javascript">
16//jquery
17</script>
18</body>
19</html>

css
1.lists {
2    border: 10px #CCC solid;
3}
4.lists > li {
5    float: left;
6    width: 25%;
7    background-color: #EEE;
8    border-top: 2px #CCC solid;
9    border-right: 2px #CCC solid;
10    font-size: 20px;
11    font-weight: bold;
12    line-height: 75px;
13    text-align: center;
14    cursor: pointer;
15    -webkit-box-sizing: border-box;
16    box-sizing: border-box;
17}
18.lists > li:nth-child(-n + 4) {
19    border-top: none;
20}
21.lists > li:nth-child(4n) {
22    border-right: none;
23}

javascript
1/**
2  * （説明）
3  * @type {array} cardNum ← カードの配列
4  * @type {string} totalCard ← カードの枚数
5  * @param {object} $card ← カードの引数
6  * @type {string} $firstCard ← カードをめくる1枚目
7  * @type {string} $secondCard ← カードをめくる2枚目
8  * @type {firstNum} $firstNum ← カードに書かれている数字
9  * @type {secondNum} $secondNum ← カードに書かれてる数字
10  * @type {string} $openedCard ← めくられたカード
11  * @type {string} f←フラグ
12  *
13**/
14
15$(function() {
16  let cardNum = [];
17  let totalCard = 16;
18  let f = false;
19
20  function open($card) {
21    $card
22      .css("pointer-events", "none")
23      .text($card.data("num"))
24      .addClass("fliped"); //openが走ったら、クラスはすべてに付与
25    if ($(".fliped").length === 2) compare(); //2枚flipされていたら比較
26  }
27
28  function close($card) {
29    $(".fliped")
30      .css("pointer-events", "")
31      .text("?")
32      .removeClass("fliped"); 
33  }
34
35  function compare() {
36    let $firstCard = $(".fliped").eq(0); //比較対象1枚目
37    let $secondCard = $(".fliped").eq(1); //比較対象2枚目
38
39    let firstNum = $firstCard.data("num");
40    let secondNum = $secondCard.data("num");
41
42    if (firstNum === secondNum) {
43      f = false;
44      $firstCard.add($secondCard).removeClass("unopened");
45
46      if ($(".unopened").length === 0) {
47        alert("Game Over");
48      }
49    } else {
50      setTimeout(function() {
51        close();
52        f = false;
53      }, 1000);
54    }
55  }
56
57  //初期配置
58  (() => {
59    // カードの中身を作成
60    for (var i = 1; i <= totalCard / 2; i++) cardNum.push(i, i);
61    // ランダムに並べ替えて
62    // li要素を作成して
63    // listに追加
64    cardNum
65      .sort(() => {
66        return Math.random() - Math.random();
67      })
68      .map(num => {
69        return "<li class='unopened' data-num='" + num + "'>?</li>";
70      })
71      .forEach(element => {
72        $(".lists").append(element);
73      });
74  })();
75
76  //クリックイベント
77  $(".lists li").on("click", function() {
78    if (f) return;
79    f = true;
80    open($(this));
81    f = false;
82  });
83});