Question

创建的演示用于说明下面描述的逻辑的工作原理 -

我使用JavaScript创建了4x4磁贴而不是硬编码到html
代码在无限循环中逐个突出显示列，这是由setInterval(colScan,1000)
当用户在html正文上按鼠标时，它会更改列扫描 - ＆gt; 所选列中的行扫描，这也是由setInterval(rowScan,1000)
当用户再次点击html正文时，它会更改行扫描 - ＆gt; col扫描

问题：

无论如何，始终会激活colScan，您可以在控制台日志中看到该列始终在增加。
当用户第二次点击时，它不会重置为列扫描。
我认为问题正在发生的部分代码

createtiles();
var k = 0,
    m = 0,
    selected_col = "",
    mousePressed = false,
    col_scan = true,
    row_scan = false;

scanSelector();

function scanSelector() {
    if (col_scan) {
        setInterval(colScan, 1000);
    } else if (row_scan) {
        setInterval(rowScan, 1000);
    }
}

document.body.onmousedown = function() {
    mousePressed = true;
}

function colScan() {
    if (k > 2) k = 0;
    else k++;
    console.log("col  " + k);
    var col = ".j_" + k;
    $(".tiles").removeClass('highlighter');
    $(col).addClass('highlighter');
    if (mousePressed) {
        mousePressed = false;
        col_scan = false;
        row_scan = true;
        selected_col = col;
        scanSelector();
    }
}

function rowScan() {
    if (m > 2) m = 0;
    else m++;
    console.log("row " + m);
    var row = selected_col + (".i_" + m);
    $(".tiles").removeClass('highlighter');
    $(row).addClass('highlighter');
    if (mousePressed) {
        mousePressed = false;
        col_scan = true;
        row_scan = false;
        selected_col = "";
        scanSelector();
    }
}

function createtiles() {
    for (var i = 0; i < 4; i++) {
        for (var j = 0; j < 4; j++) {
            var divTile = $('<div>', {
                class: 'tiles ' + ("j_" + j) + " " + ("i_" + i)
            });
            divTile.appendTo('.comtile');
        }
    }
}

DEMO - ＆gt; https://codepen.io/xblack/pen/BdGzYx

createtiles();
var k = 0,
  m = 0,
  selected_col = "",
  mousePressed = false,
  col_scan = true,
  row_scan = false;

scanSelector();

function scanSelector() {
  if (col_scan) {
    setInterval(colScan, 1000);
  } else if (row_scan) {
    setInterval(rowScan, 1000);
  }
}

document.body.onmousedown = function() {
  mousePressed = true;
}

function colScan() {
  if (k > 2) k = 0;
  else k++;
  console.log("col  " + k);
  var col = ".j_" + k;
  $(".tiles").removeClass('highlighter');
  $(col).addClass('highlighter');
  if (mousePressed) {
    mousePressed = false;
    col_scan = false;
    row_scan = true;
    selected_col = col;
    scanSelector();
  }
}

function rowScan() {
  if (m > 2) m = 0;
  else m++;
  console.log("row " + m);
  var row = selected_col + (".i_" + m);
  $(".tiles").removeClass('highlighter');
  $(row).addClass('highlighter');
  if (mousePressed) {
    mousePressed = false;
    col_scan = true;
    row_scan = false;
    selected_col = "";
    scanSelector();
  }
}

function createtiles() {
  for (var i = 0; i < 4; i++) {
    for (var j = 0; j < 4; j++) {
      var divTile = $('<div>', {
        class: 'tiles ' + ("j_" + j) + " " + ("i_" + i)
      });
      divTile.appendTo('.comtile');
    }
  }
}

html,
body {
  margin: 0px;
  padding: 0px;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
  background: white;
}

* {
  box-sizing: border-box!important;
}

.conatiner {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-area: "menu" "comContent";
}

.menu {
  grid-area: menu;
  height: 5vh;
  padding: 2vh;
}

.comtile {
  grid-area: comContent;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  grid-gap: 0.5vh;
  height: 95vh;
  padding: 2vh;
}

.tiles {
  background: #F7F7F7;
  border-radius: 0.4vh;
  border: 1px solid #EEEBEB;
}

.highlighter {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.3s cubic-bezier(0.38, -0.76, 0, 1.69);
  border: 1px solid silver;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
  <div class="menu">MAIN MENU</div>
  <div class="comtile"></div>
</div>

Answer 1

您需要进行以下更改：

将setInterval替换为setTimeout出于@ASDFGerte所述的原因。

function scanSelector() {
    if (col_scan) {
        // Replace setInterval with setTimeout
        setTimeout(colScan, 1000);
    } else i f (row_scan) {
        // Replace setInterval with setTimeout
        setTimeout(rowScan, 1000);
    }
}

移动scanSelector()和rowScan中的colScan行。两种方法的更改都相同，我只会在rowScan中显示更改。

function rowScan() {
    if (m > 2) m = 0;
    else m++;
    console.log("row " + m);
    var row = selected_col + (".i_" + m);
    $(".tiles").removeClass('highlighter');
    $(row).addClass('highlighter');
    if (mousePressed) {
        mousePressed = false;
        col_scan = true;
        row_scan = false;
        selected_col = "";
        // Remove this line
        // scanSelector();
    }
    // Because you're no longer using setInterval you need to call 
    // this method after each timeout.
    scanSelector();
}

每当你打电话给scanSelector()时，它都会创建另一个间隔。初始间隔将突出显示列，在第一次单击后，您有两个并排运行的间隔：原始间隔和突出显示行的间隔。每次点击后，您只需添加间隔。

您可以存储间隔ID，setInterval的结果，并在从列到行突出显示时更改此间隔，反之亦然。更简单的解决方案是从setInterval转移到setTimeout，如上面显示的已更改内容中所述。

JavaScript布尔值不起作用，循环出错

1 个答案: