A Function doesn't work with setTimeout

Question

So the page loads, however a part of the page is fetched from the server, which loads up later, so I set up a setTimeout function, however after doing this the error comes up

Uncaught reference error: check is not defined

I also moved check function outside the setTimeout still no luck

When this is pasted without the timeout function in the developer console everything, the check function works fine.

setTimeout(function() {


    var getclass = document.getElementsByClassName('title');
    var containerlength = getclass.length;

    for (var i = 0; i < containerlength; i++) {
        var container = getclass[i];
        var jobid = getclass[i].children[0].innerHTML.trim().substring(0, 5);
        var fragment = document.createElement('div');
        var chk = "";
        if (localStorage.getItem(jobid) == 1) {
            chk = "checked";
            getclass[i].style.textDecoration = 'line-through';
        }
        fragment.innerHTML = '<input onclick="check(this)" class="jobs" value="' + jobid + '" name="' + jobid + '" type="checkbox"' + chk + '></input>';
        container.appendChild(fragment);

    }

    function check(ele) {
        //     alert(ele.name);
        var name = ele.name;
        var papa = ele.parentNode.parentNode;
        if (localStorage.getItem(name) == 1) {
            localStorage.setItem(name, 0);
            papa.style.textDecoration = 'none';
        } else {
            localStorage.setItem(name, 1);
            papa.style.textDecoration = 'line-through';
        }
    }


}, 5000);

Answer 1

This is probably because you defined check function inside the scope of setTimeout callback. Try to get check function out of the scope, like this:

function check(ele)
{
    //     alert(ele.name);
    var name = ele.name;
    var papa = ele.parentNode.parentNode;
    if(localStorage.getItem(name) == 1)
    {
        localStorage.setItem(name, 0);
        papa.style.textDecoration = 'none';
    }
    else
    {
        localStorage.setItem(name, 1);
        papa.style.textDecoration = 'line-through';
    }
}


setTimeout(function(){ 

var getclass = document.getElementsByClassName('title');
var containerlength = getclass.length;

for(var i=0; i<containerlength; i++)
{
    var container = getclass[i];
    var jobid = getclass[i].children[0].innerHTML.trim().substring(0, 5);
    var fragment = document.createElement('div');
    var chk = "";
    if(localStorage.getItem(jobid) == 1)
    {
        chk = "checked";
        getclass[i].style.textDecoration = 'line-through';
    }
    fragment.innerHTML = '<input onclick="check(this)" class="jobs" value="' + jobid + '" name="' + jobid + '" type="checkbox"' + chk + '></input>';
    container.appendChild(fragment);

}
}, 5000);

Answer 2

您可以在超时之外编写check函数。由于此函数始终可用，因此可以解决您的问题。

Answer 3

Because you're trying to refer to a global check function, but not the local check .

With the current way you build the input element inside the loop you don't have access to the scope where check has been declared.

When you've access to the input element reference you can add/set event listeners to it – then the good thing here is to create the input element using document.createElement() , so that you have access to the returned HTML element reference in the same scope where you have access to check .

var input = document.createElement('input');
input.addEventListener('click', check.bind(null, input), false);
// This event listener could also be set
// through the 'HTMLElement#onclick' setter

fragment.appendChild(input);

Here's an example of implementation in your code: (I moved check to earlier's scope to free legibility)

var check;

check = function(ele) {
  var name = ele.name;
  var papa = ele.parentNode.parentNode;

  if (localStorage.getItem(name) === 1) {
    localStorage.setItem(name, 0);
    papa.style.textDecoration = 'none';

  } else {
    localStorage.setItem(name, 1);
    papa.style.textDecoration = 'line-through';
  }
}

setTimeout(function() {
  var getclass = document.getElementsByClassName('title');
  var containerlength = getclass.length;

  for (var i = 0; i < containerlength; ++i) {
    var container = getclass[i];

    var jobid = getclass[i]
                  .children[0]
                  .innerHTML
                  .trim()
                  .substring(0, 5);

    var fragment = document.createElement('div');
    var chk = "";

    if (localStorage.getItem(jobid) === 1) {
      chk = "checked";
      getclass[i].style.textDecoration = 'line-through';
    }

    var input = document.createElement('input');

    input.addEventListener('click', check.bind(null, input), false);
    input.class = "jobs";
    input.value =
    input.name = jobid;
    input.type = "checkbox";

    fragment.appendChild(input);
    container.appendChild(fragment);

  }
}, 5000);

Answer 4

Just move the check function outside of the setTimeout and remove the brace on your input.

Check this plunker

https://plnkr.co/edit/sop3R4PqQ13M7DwovdnZ?p=preview

function check(ele) {
        //     alert(ele.name);
        var name = ele.name;
        var papa = ele.parentNode.parentNode;
        if (localStorage.getItem(name) == 1) {
            localStorage.setItem(name, 0);
            papa.style.textDecoration = 'none';
        } else {
            localStorage.setItem(name, 1);
            papa.style.textDecoration = 'line-through';
        }
    }

setTimeout(function() {

    var getclass = document.getElementsByClassName('title');
    var containerlength = getclass.length;

    for (var i = 0; i < containerlength; i++) {
        var container = getclass[i];
        var jobid = getclass[i].children[0].innerHTML.trim().substring(0, 5);
        var fragment = document.createElement('div');
        var chk = "";
        if (localStorage.getItem(jobid) == 1) {
            chk = "checked";
            getclass[i].style.textDecoration = 'line-through';
        }
        fragment.innerHTML = '<input onclick="check(this)" class="jobs" value="' + jobid + '" name="' + jobid + '" type="checkbox"' + chk + '></input>';
    container.appendChild(fragment);

    }
}, 5000);