Вызов переменной как функции () в Javascript

Question

У меня проблемы с тем, как вызвать переменную как функцию.Я уже исследовал это, но кажется, что он не работает над моим кодом.Есть идеи, что случилось с моим кодом?Спасибо.

Сначала HTML

<a class="showhide" id="SampleID"><i class="fa fa-chevron-up"></i></a>

Затем script

// Function for collapse hpanel
$('.showhide').on('click', function (event) {
    event.preventDefault();
    var id = $(this).attr("id").toString();
    //console.log("ShowHide: " + id);

    setTimeout(function () {
        var fn = window[id];
        fn();
    },200);
});

function SampleID() {
    alert("111");
}

Но это показывает

Uncaught TypeError: fn не является функцией

Примечание: Я пытался использовать eval () и его работу.Но я читал, что использование eval() не очень хорошо, поэтому я пытаюсь найти альтернативу.

Answer 1

Кажется, это работает нормально?

// Function for collapse hpanel
$('.showhide').on('click', function (event) {
    event.preventDefault();
    var id = $(this).attr("id").toString();
    //console.log("ShowHide: " + id);

    setTimeout(function () {
        var fn = window[id];
        fn();
    },200);
});

function SampleID() {
    alert("111");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="showhide" id="SampleID"><i class="fa fa-chevron-up">TEST</i></a>

Я бы предложил использовать метод data- для определения информации JavaScript в DOM:

var showHideFunctions = [{
  id: "sample-id",
  func: function() {
    console.log("Sample function fired");
  }
}];

function showHideClick(event) {
  event.preventDefault();
  var id = event.target.getAttribute("data-function-id");
  console.log("ShowHide: " + id);
  setTimeout(function() {
    showHideFunctions.find(function(entry) {
      return id == entry.id;
    }).func();
  }, 200);
}
document.querySelectorAll(".showhide")
  .forEach(function(elm) {
    elm.addEventListener("click", showHideClick);
  });

<p class="showhide" data-function-id="sample-id">Test</p>

Answer 2

Это работает для меня

// Function for collapse hpanel
$('.showhide').on('click', function (event) {
    event.preventDefault();
    
    var id = $(this).attr("id").toString();
    
    setTimeout(function () {
        var fn = window[id];
        
        fn();
    }, 200);
});

function SampleID() {
    alert("111");
}

.showhide {
  height: 100px;
  width: 100px;
  background-color: #444444;
  border: 5px solid pink;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="showhide" id="SampleID"><i class="fa fa-chevron-up"></i></div>