Javascript函数总是不会在.load之后运行

Ok so I have three <select> fields lined up horizontally like this:

----------|teacher1|----|student1|----|student6|

----------|teacher2|

----------|teacher3|

Okey, so for this example we use teachers and students, a teacher can contain several students. And when you select a teacher from the left list, all students connected to that teacher appears in middle list. And on the right we have students who does not have a teacher. If you click on a student in the middle field, it will be deleted from that teacher and appear in the right field.(CONNECTIONS ARE MADE IN MYSQL DB).

All select fields are inside <div>, which I with jquery use the .load() function to change content of, like this for the delete function:

     $('#hold2').load("page.php?q=" + data);

Everything works fine to load and the database changes correctly, the problem is I want to refresh mid and right field after the .load() function, so one does not have to refresh the page to see the result. So I put these functions under:

     $('#hold2').load("page.php?q=" + data);
     refreshTable1(teacher);
     refreshStudent();

Here is refreshTable1:

     function refreshTable1(value) {
     teacher = value;
     $('#holder').load("example.php?q=" + value);

     }

Here is refreshStudent:

    function refreshStudent() {
    $('#table').load("examplepalge.php?p=blabla", function(){
            setTimeout(refreshTable1(etc), 2000);
    });

    }

Sometimes it refreshes both middle and right field directly, sometimes none and sometimes just one of them. How can I make this run smooth so that the fields will definitely refresh correctly AFTER: $('#hold2').load("page.php?q=" + data);

PLEASE NOTE: Not all connections and function links are correct, I just changed some stuff for this example. But we already know that the functions work, its just that sometimes they load correctly and sometimes not.

You need to set it up with callbacks so you only execute the 2nd function once the first has completed.