function colorAndWait (f, delay, color) {
  return  function() {
      f.style.backgroundColor = color;
      return new Promise(resolve => {
        setTimeout(function() {
          console.log('before resolve', delay, color);
          resolve();
        },delay);
      });
    }
}

function change() {
  var f = document.getElementById('square');
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      return resolve();
    }, 500);
  })
    .then(colorAndWait(f, 500, 'blue'))
    .then(colorAndWait(f, 500, 'white'))
    .then(colorAndWait(f, 500, 'blue'))
    .then(colorAndWait(f, 500, 'white'));

  // var f = document.getElementById('square');
  // setTimeout(function blink() {
  //   f.style.backgroundColor = 'blue';
  //   setTimeout(function blink() {
  //     f.style.backgroundColor = 'white';
  //     setTimeout(function blink() {
  //       f.style.backgroundColor = 'blue';
  //       setTimeout(function blink() {
  //         f.style.backgroundColor = 'white';
  //       },500);
  //     },500);
  //   },500);
  // },500);
}