如何模拟HTTP请求

Question

当用户在输入表单输入字段的输入后单击“立即注册”按钮时，我基本上想要切换到动画按钮。

Answer 1

您可以使用setInterval（）方法。 setInterval（）方法在每个给定的时间间隔重复给定的函数。

function logOptions() {
	var s = document.getElementsByName( 'Interests' )[0];
	var text = s.options[ s.selectedIndex ].text;
	console.log(text)
}

function logEmail() {
	console.log( document.getElementById( 'email' ).value )
}

function myFunction( e ) {
  e.preventDefault();

  document.getElementById( 'result' ).innerHTML = 'Submiting. <br/>Please wait';

  var elapsed = 0,
      str = ".",
      x = setInterval( function() {

      //Ajax simulation
      str = str + ".";
      if ( !elapsed ) document.getElementById( 'result' ).innerHTML = 'Submiting.' + str + '<br/>Please wait';

      // Calculate elapsed time
      elapsed += 1;

      // If the elapsed time is finished, write some text
      if ( elapsed > 2 ) {
        clearInterval( x );
        document.getElementById( 'result' ).innerHTML = 'Form Submited!';
        var elem = document.getElementById( 'inputform' );

        if ( elem.detachEvent) {
          elem.detachEvent( 'onsubmit', myFunction );
          elem.submit();
        } else {
          elem.removeEventListener( 'submit', myFunction );
          elem.submit();
        }
        }
      }, 1000 );

  logOptions();
	logEmail()
};

// attach event
	if ( document.attachEvent ) document.attachEvent( 'onsubmit', myFunction );
	else document.addEventListener( 'submit', myFunction );

<form id="inputform" method="get" action="confirmation.html">
  <input id="email" type="email" placeholder="Email Address" required>
  <button type="submit" id="validate">Sign up now</button>
  <select name="Interests" required>
    <option value="" disabled selected>Interested in..</option>
    <option value="option1">Marketing</option>
    <option value="option2">Option2</option>
    <option value="option3">Option3</option>
    <option value="option4">Option4</option>
  </select>
</form>

<div id="result"></div>