Question

出于某种原因，我似乎无法阻止用户在链接上多次点击。当用户点击一堆时，图像来回停顿。对我做错了什么想法？

$(document).ready(function() {
  console.log("Welcome to my portfolio. Glad you made it!");
  $(".nav-bar ul li").click(function() {
    var image = $(".nav-move");
    var link = $(this);
    var running = false;
    var imagePos = $(".nav-move").position().left;
    var linkPos = $(this).position().left;
    var count = 0;

    if (imagePos < linkPos && running == false) {
      console.log(imagePos + ", " + linkPos + ", " + link.width());
      right();
      running = true;
    } else if (imagePos > linkPos && running == false) {
      console.log(imagePos + ", " + linkPos + ", " + link.width());
      left();
      running = true;
    }

    function right() {
      count++;
      image.css({
        "left": imagePos + count + "px"
      })
      imagePos = $(".nav-move").position().left;
      if (imagePos + (image.width() / 2) < linkPos + (link.width() / 2)) {
        setTimeout(right, 20);
      } else {
        running == false
      }
    }

    function left() {
      count--;
      image.css({
        "left": imagePos + count + "px"
      })
      imagePos = $(".nav-move").position().left;
      if (imagePos + (image.width() / 2) > linkPos + (link.width() / 2)) {
        setTimeout(left, 20);
      } else {
        running == false
      }
    }
  })
});

.nav-bar {
  position: absolute;
  bottom: 0;
  padding: 10px 0 30px;
  background: #000;
  color: #fff;
}
.nav-bar ul {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-around;
}
.nav-bar ul li {
  display: inline;
  padding: 0;
  font-size: 35px;
  font-weight: bold;
  font-family: 'Indie Flower', cursive;
}
.nav-bar ul .sub-item {
  display: none;
}
.main-content {
  background: #fff;
}
.nav-move {
  position: absolute;
  padding: 0px;
  margin: -10px;
}
.guy-running {
  display: none;
}
/*# sourceMappingURL=style.css.map */

<!DOCTYPE html>
<html>

<head>
  <title>Portfolio Page</title>
  <!-- JQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <!-- BOOTSTRAP -->
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  <!-- FONTS -->
  <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
  <!-- Stylesheet -->
  <link rel="stylesheet" href="stylesheets/style.css">
  <!-- Javascript Files -->
  <script type="text/javascript" src="js/home.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-9 main-content">
        <!-- Home -->
        <div class="home-content">
          Test Home-Content
        </div>
        <!-- About -->
        <div class="about-content">
          Test About-Content
        </div>
        <!-- Portfolio -->
        <div class="portfolio-content">
          Test Portfolio-Content
        </div>
        <!-- Contact -->
        <div class="contact-content">
          Test Contact-Content
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 nav-bar">
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Portfolio
            <ul class="sub-item">
              <li>Item 01</li>
              <li>Item 02</li>
              <li>Item 03</li>
            </ul>
          </li>
          <li>Contact</li>
        </ul>
        <div class="images">
          <img class="nav-move" src="assets/nav-img.png" alt="">
          <img class="guy-running" src="assets/guy-running.gif" alt="">
        </div>
      </div>
    </div>
  </div>

</body>

</html>

PS：出于某种原因，链接下方的居中图像也不起作用; /与问题无关，只是旁注。

Answer 1

尝试将running变量设为全局：

 $(document).ready(function() {
   var running = false;
  console.log("Welcome to my portfolio. Glad you made it!");
  $(".nav-bar ul li").click(function() {
    var image = $(".nav-move");
    var link = $(this);
    var imagePos = $(".nav-move").position().left;
    var linkPos = $(this).position().left;
    var count = 0;

    if (imagePos < linkPos && running == false) {
      console.log(imagePos + ", " + linkPos + ", " + link.width());
      right();
      running = true;
    } else if (imagePos > linkPos && running == false) {
      console.log(imagePos + ", " + linkPos + ", " + link.width());
      left();
      running = true;
    }

    function right() {
      count++;
      image.css({
        "left": imagePos + count + "px"
      })
      imagePos = $(".nav-move").position().left;
      if (imagePos + (image.width() / 2) < linkPos + (link.width() / 2)) {
        setTimeout(right, 20);
      } else {
        running = false
      }
    }

    function left() {
      count--;
      image.css({
        "left": imagePos + count + "px"
      })
      imagePos = $(".nav-move").position().left;
      if (imagePos + (image.width() / 2) > linkPos + (link.width() / 2)) {
        setTimeout(left, 20);
      } else {
        running = false
      }
    }
  })
});

防止函数在运行时多次运行

1 个答案: