JSFiddle - React, Tailwind, and code Playground

by qq286735628

HTML

<div class="showcase"></div>

<label><input type="checkbox"> checkPoint2返回$.Deferred().reject()</label>

CSS

.showcase{
  border: 1px solid red;
  padding: 5px;
  margin-bottom: 10px;
}

JavaScript

var $showcase = $('.showcase');
var flag = false;

var main = function() {

	$showcase.empty();

  var def = $.Deferred();
  var checkPoint1 = function(){
    $showcase.append('checkPoint<br>');
    return ;
  }
  var checkPoint2 = function(){
    $showcase.append('checkPoint2<br>');
    
    if (flag) {
    	return $.Deferred().reject();
    }
   
    return;
  }
  var process = function(){
    $showcase.append('process<br>');
    return;
  }
  var onError = function() {
    $showcase.append('some thing error!');
  }

  def.then(checkPoint1).then(checkPoint2).then(process).fail(onError);

  def.resolve();

}

$('input').on('change', function(){
	flag = $(this).prop('checked');
  main();
});

main();