防止功能在運行時多次運行

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 個解決方案

解決方案1
0 2016-10-25 01:22:44

防止功能在運行時多次運行

問題描述

1 個解決方案

解決方案1 0 2016-10-25 01:22:44

解決方案1
0 2016-10-25 01:22:44