title: Run JS Functions run in sequence onclick
body: <p>I have been trying to get these functions to run in sequence using onclick for the first and ID for the second. What I am trying to do is have the the "loading" script run and then show the "result" after the "loading" timeout. Thanks in advance for the help.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input type="button" id="btn_copy" onclick="show()" /&gt;
  &lt;/span&gt;&lt;label&gt;Result:&lt;/label&gt;
  &lt;span type="text" id="result_paste"&gt;&lt;img id="loading" src="ajax-loader.gif" style="display: none"&gt;&lt;/span&gt;
  &lt;input type="text" id="result_copy"&gt;
  </code></pre>
  
  <p>JS:  </p>
  
  <pre><code>function show() {
      document.getElementById("loading").style.display = "block";
      setTimeout("hide()", 1000);
  }
  
  function hide() {
      document.getElementById("loading").style.display = "none";
  }
  
  $(function result() {
      $('#btn_copy').on('click', function () {
          var get_val = $('#result_copy').val();
          if (!get_val) {
              alert("Please Enter Some Value");
              return false;
          }
          $('#result_paste').text(get_val);
      });
  });
  </code></pre>