[英]How to execute a function only after another one is finished on browser Javascript?
我想創建一個 web 應用程序國際象棋游戲，所以每個棋子都有一個事件監聽器來等待玩家點擊它。 當玩家點擊一個棋子時（現在我只使用棋子）它的 id 將被保存並打印出來，只有在這之后所有的方格都應該等待點擊（我沒有使用有效的方格，可以任何正方形）； 如果點擊了一個正方形，它的 id 應該被保存並打印出來。
但是在控制台上，當我點擊一個pawn時，它的id被打印了兩次，一次是普通打印，另一次是方形打印（所以它需要方形打印）。 因此，程序不是在單擊棋子后等待調用打印正方形 id 的 function，而是在正方形 id 的位置打印棋子 id。 所以我認為程序不會等到第一個 function 完成：
//Each div(square) of chess board var $class_white = [...document.querySelectorAll('.house_white')]; var $class_black = [...document.querySelectorAll('.house_black')]; //Every pawn var $class_pawn = [...document.querySelectorAll('.pawn')]; //Variables to store the piece and square id. var $piece; var $square; //Every pawn is waiting to be clicked function $$wait_pawns(item) { item.addEventListener('click', $$pawn_clicked); } //This will add the event listener type 'click' to the squares function $$prepare_squares(){ $class_white.forEach($$wait_squares); $class_black.forEach($$wait_squares); } //If a pawn is clicked, it will save the pawn id and then call $$prepare_squares() to add an event listener type 'click' to the squares function $$pawn_clicked(event) { $piece = event.target.id; console.log($piece); $$prepare_squares(); } //Now every square is wainting to be clicked function $$wait_squares(item){ item.addEventListener('click', $$square_clicked); } //After a square is clicked, it's id will be saved and will be printed. function $$square_clicked(event2){ $square = event2.target.id; console.log($square); } //This will add an event listener type 'click' to all pawns $class_pawn.forEach($$wait_pawns);
* { margin: 0; padding: 0; box-sizing: border-box; } body { /*background-color: rgb(0,0,80);*/ background-image: url("black.png"); background-size: cover; background-attachment: fixed; background-repeat: no-repeat; }.pawn{ height:50px; width:50px; }.bishop{ height:50px; width:50px; }.rock{ height:50px; width:50px; }.horse{ height:50px; width:50px; } #king{ height:50px; width:50px; } #queen{ height:60px; width:60px; }.container { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); width: 600px; height: 600px; top: 50%; left: 50%; position: absolute; transform: translate(-50%,-50%); /*border-bottom: 9px solid rgb(0,0,0); border-left: 9px solid rgb(0,0,0); border-top: 9px solid rgb(0,0,0); border-right: 9px solid rgb(0,0,0);*/ }.house_white { display: flex; background-color: rgb(250,250,250); align-items: center; justify-content: center; }.house_black { display: flex; background: rgb(0,100,0); align-items: center; justify-content: center; } #demo { padding-bottom: 2px; height:50px; width:220px; display: flex; justify-content: center; align-items: center; color: rgb(255,255,255); position: absolute; top: 30%; left: 90%; transform: translate(-50%,-50%); border-radius: 8px; font-family: Arial, sans-serif, serif; font-size: 1.30rem; border-bottom: 2px solid rgb(200,200,200); } #start { height:50px; width:200px; display: flex; justify-content: center; align-items: center; background-color: rgb(0,0,0); color: rgb(255,255,255); position: absolute; top: 60%; left: 90%; transform: translate(-50%,-50%); border-radius: 8px; font-family: Arial, sans-serif, serif; font-size: 1.30rem; outline: none; } #start:hover { background-color: rgb(255,255,255); color: rgb(0,0,0); } #circle { height:30px; width:30px; } #queen { height:40px; width:40px; } /*#joke { height:300px; width:300px; position: absolute; top: 40%; left: 15%; transform: translate(-50%,-50%); border-radius: 8px; border: 6px solid; border-color: rgb(0,0,0); }*/
<,DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="description" content="Dynamic, light, fast and simple"> <meta name="author" content="necromancerc-137"> <meta name="keywords" content="dynamic"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> <title>Javascript testing</title> </head> <body> <main> <.--<img id="joke" src="joke.gif">--> <div id="demo">Frontend...</div> <button id="start">Help.</button> <div class="container"> <div id = "a8" class="house_white"></div> <div id = "b8" class="house_black"></div> <div id = "c8" class="house_white"></div> <div id = "d8" class="house_black"></div> <div id = "e8" class="house_white"></div> <div id = "f8" class="house_black"></div> <div id = "g8" class="house_white"></div> <div id = "h8" class="house_black"></div> <div id = "a7" class="house_black"></div> <div id = "b7" class="house_white"></div> <div id = "c7" class="house_black"></div> <div id = "d7" class="house_white"></div> <div id = "e7" class="house_black"></div> <div id = "f7" class="house_white"></div> <div id = "g7" class="house_black"></div> <div id = "h7" class="house_white"></div> <div id = "a6" class="house_white"></div> <div id = "b6" class="house_black"></div> <div id = "c6" class="house_white"></div> <div id = "d6" class="house_black"></div> <div id = "e6" class="house_white"></div> <div id = "f6" class="house_black"></div> <div id = "g6" class="house_white"></div> <div id = "h6" class="house_black"></div> <div id = "a5" class="house_black"></div> <div id = "b5" class="house_white"></div> <div id = "c5" class="house_black"></div> <div id = "d5" class="house_white"></div> <div id = "e5" class="house_black"></div> <div id = "f5" class="house_white"></div> <div id = "g5" class="house_black"></div> <div id = "h5" class="house_white"></div> <div id = "a4" class="house_white"></div> <div id = "b4" class="house_black"></div> <div id = "c4" class="house_white"></div> <div id = "d4" class="house_black"></div> <div id = "e4" class="house_white"></div> <div id = "f4" class="house_black"></div> <div id = "g4" class="house_white"></div> <div id = "h4" class="house_black"></div> <div id = "a3" class="house_black"></div> <div id = "b3" class="house_white"></div> <div id = "c3" class="house_black"></div> <div id = "d3" class="house_white"></div> <div id = "e3" class="house_black"></div> <div id = "f3" class="house_white"></div> <div id = "g3" class="house_black"></div> <div id = "h3" class="house_white"></div> <div id = "a2" class="house_white"><img id="pawn0" class="pawn" src="pawn.png"></div> <div id = "b2" class="house_black"><img id="pawn1" class="pawn" src="pawn.png"></div> <div id = "c2" class="house_white"><img id="pawn2" class="pawn" src="pawn.png"></div> <div id = "d2" class="house_black"><img id="pawn3" class="pawn" src="pawn.png"></div> <div id = "e2" class="house_white"><img id="pawn4" class="pawn" src="pawn.png"></div> <div id = "f2" class="house_black"><img id="pawn5" class="pawn" src="pawn.png"></div> <div id = "g2" class="house_white"><img id="pawn6" class="pawn" src="pawn.png"></div> <div id = "h2" class="house_black"><img id="pawn7" class="pawn" src="pawn.png"></div> <div id = "a1" class="house_black"><img class="rock" src="rock.png"></div> <div id = "b1" class="house_white"><img class="horse" src="horse.png"></div> <div id = "c1" class="house_black"><img class="bishop" src="bishop.png"></div> <div id = "d1" class="house_white"><img id="queen" src="queen.png"></div> <div id = "e1" class="house_black"><img id="king" src="king.png"></div> <div id = "f1" class="house_white"><img class="bishop" src="bishop.png"></div> <div id = "g1" class="house_black"><img class="horse" src="horse.png"></div> <div id = "h1" class="house_white"><img class="rock" src="rock.png"></div> </div> </main> <script type="text/javascript" src="test.js"></script> </body> </html>
所以我認為程序不會等到第一個 function 完成
這不是正在發生的事情。 非async JavaScript function始終運行到完成（除非整個環境終止，例如關閉 web 頁面）。
點擊事件從子元素傳播（“冒泡”）到它們的父元素再到它的父元素，等等。由於您的 pawn 是正方形的子元素，在處理 pawn 上的點擊事件后，點擊事件冒泡到正方形和在那里處理。
您需要做幾件事：
使用event.stopPropagation(); 在$$pawn_clicked中的event object
讓變量為您的程序存儲 state 信息，以便它知道是否希望在正方形上獲得點擊。 我認為您已經在$piece變量中擁有它。 因此，您的正方形單擊處理程序應該只在$piece不是“no piece”值時才執行某些操作（看起來您正在為此使用undefined ）。
如何使javascript函數在另一個完成后運行？
[英]How to make a javascript function to run after another one get finished?
如何僅在第一個完成后才觸發 function（JavaScript）
[英]How to fire a function only after the first one has finished in (JavaScript)
Javascript：如何使function2僅在function1完全完成之后執行？
[英]Javascript: How do you make function2 execute only after function1 is completely finished?
如何在完成另一個函數后才執行javascript / jquery函數？
[英]How to execute a javascript/jquery function only after the completion of another function?
我應該如何在JavaScript中一個接一個地執行函數？
[英]How should I execute functions only one after another in JavaScript?
另一個函數完成后，如何執行javascript函數？
[英]How can you execute a javascript function after another one is completed?
在JSF中完成bean方法后如何執行javascript函數
[英]How to execute javascript function after bean method is finished in JSF
js庫下載完成后如何執行javascript函數？
[英]How to execute javascript function after js library finished downloading?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.