jQuery addClass example

Change class name on click in jQuery

by randynwalsh

HTML

<div id="banner-message">
  <p id="msg">...</p>
  <button onclick="stopit">Stop</button>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

var waiting;

function stopit() {
  waiting = false;
}

function log(a) {
  $("#msg").text($("#msg").text() + "\r" + a);
}

var arg = 0

async function serverPause() {
  waiting = true;
  

  await new Promise(resolve => {
        waitLoop = function () {
            if (!waiting) resolve('done'); else setTimeout(waitLoop, 100);
        }
        setTimeout(waitLoop, 100);
      }
  );

  arg++;
  return arg;
}

async function f() {
  
  
  var f1;
  var f2;
  
  // shows 10 after 1 second
  await serverPause().then(ans => { f1 = ans });

  await serverPause().then(ans => { f2 = ans });

  
    return f1 + f2;
}


 f().then(ans => log(ans))