settimeout后无法访问Javascript函数

我设计了以下代码段：

                        <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;
  }
};

window.onload=function（）{
var links=document.getElementsByClassName（'a'）；
对于（变量i=0；i

我试图在下面的占位符中显示单击的图像，从标签的href读取源代码并将其分配给占位符的src，但我面临的问题是从未调用/访问showpic。我应该如何修改代码以解决此问题。我单击图像，加载程序出现，然后在浏览器窗口中加载图像

这是不对的

您应该将一个函数传递给

setTimeout

，但您正在调用它并实际传递执行的一些结果。例如，你应该这样做

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

你打错了。您将函数声明为

showPic

，但将其称为

showPic

将

showpic（this）

更正为

（）=>showpic（this）

。您对

showpic

函数的调用拼写错误。另外，您的

showPic

函数不需要包装在

窗口中。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;
  }

window.onload=function（）{
var links=document.getElementsByClassName（'a'）；
对于（变量i=0；ishowPic（this），2000）；
e、 预防默认值（）；
});
}
}
函数showPic（whichpic）{
document.getElementById（'placeholder'）.style.display='block'；
var source=whichpic.getAttribute（'href'）；
var placeholder=document.getElementById（'placeholder'）；
占位符.setAttribute（'src'，source）；
返回false；
}

您的DOM中有任何错误吗？没有，一些警告

showpic（this）=>{}

在我看来不是有效的语法。我想你的意思是

（）=>{showpic（this）；}

@RobinZigmond，对不起，我尝试了各种方法来调用函数，并错误地将其粘贴到了这里，我现在编辑了这篇文章是的，你的代码中有相当多的拼写错误会导致一些错误

imageDescription

是错误的，

insertAfter

根本没有被定义为一个函数。你知道一些js库或代码片段在同一页面的下面的div中显示图像，而不是打开一个模式等。我的主要目标是单击缩略图并在下面的div中放大它，并显示下面图像的一些细节

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;
  }