設置超時后無法訪問Javascript功能

Question

我設計了以下代碼片段：

                        <div id="content">
                            <h3>Select Images Below</h3>
                            <ul id="imagegallery">
                              <li>
                                <a class='a' href="./img/team/t1.jpg" title="The crowd goes wild" onclick="">
                                  <img src="./img/team/t1.jpg"  height="50px" width="50px" alt="the band in concert" />
                                </a>
                              </li>
                              <li>
                                <a class='a' href="./img/team/t2.jpg" title="An atmospheric moment">
                                  <img src="./img/team/t2.jpg" height="50px" width="50px" alt="the bassist" />
                                </a>
                              </li>
                              <li>
                                <a class='a' href="./img/team/t3.jpg" title="Rocking out">
                                  <img id='image' src="./img/team/t3.jpg" height="50px" width="50px" alt="the guitarist" />
                                </a>
                              </li>
                              <li>
                                <a class='a'href="./img/team/t4.jpg" title="Encore! Encore!">
                                  <img id='image' src="./img/team/t4.jpg" height="50px" width="50px" alt="the audience" />
                                </a>
                              </li>
                            </ul>
                            <div>
                                <img id='placeholder', src="./img/resources/neutral_1.jpg", height="450px" width="550px" alt="Image gooes here", style="margin-bottom: 50px;padding: 10px;">
                            </div>
                            <div id="loading">
                                <img src="img/loading.gif" alt="">
                            </div>
                            <div id="show">
                                <h1 id ='h'>It works</h1>
                            </div>
                          </div>

這段代碼的 JS 是這樣的

window.onload = function() {
  var links = document.getElementsByClassName('a');
  for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', function(e) {
      // Hide results
      document.getElementById('placeholder').style.display = 'none';
      // Show loader
      document.getElementById('loading').style.display = 'block';
      setTimeout(showpic(this), 2000);
      e.preventDefault();
    });
  }
  function showPic(whichpic) {
    document.getElementById('placeholder').style.display = 'block';
    var source = whichpic.getAttribute('href');
    var placeholder = document.getElementById('placeholder');
    placeholder.setAttribute('src', source);
    return false;
  }
};

我試圖在下面的占位符中顯示單擊的圖像，從標簽的 href 讀取源並將其分配給占位符的 src，但我面臨的問題是從未調用/訪問過 showpic。 我應該如何修改我的代碼來解決這個問題。 我單擊圖像，加載程序出現，然后圖像在瀏覽器窗口中加載

Answer 1

1. 這是不正確的

setTimeout(showpic(this), 2000);

您應該向setTimeout傳遞一個函數，但您正在調用它並實際傳遞一個執行的結果。 你應該這樣做，例如

setTimeout(() => showpic(this), 2000);

2. 你有一個錯字。 您將函數聲明為showPic但將其稱為showpic

Answer 2

將showpic(this)更正為() => showpic(this)您對showPic函數的調用拼寫錯誤。 此外，您的showPic函數不需要包含在window.onload函數中。 你的 JS 應該是這樣的，它應該可以工作：

window.onload = function() {
  var links = document.getElementsByClassName('a');
  for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', function(e) {
      // Hide results
      document.getElementById('placeholder').style.display = 'none';
      // Show loader
      document.getElementById('loading').style.display = 'block';
      setTimeout(() => showPic(this), 2000);
      e.preventDefault();
         });
    }
  }

function showPic(whichpic) {
    document.getElementById('placeholder').style.display = 'block';
    var source = whichpic.getAttribute('href');
    var placeholder = document.getElementById('placeholder');
    placeholder.setAttribute('src', source);
    return false;
  }