Javascript jQuery承诺/延迟比回调更好的代码？如何做到这一点？

我想向大家展示jQuery延迟对象可以让代码变得多么干净，而不是使用“回调地狱”

我没有选择切换到Javascript的承诺

以下是“错误”代码：

/* Callback Hell !? */

// Main

var stringToProcess = "1,2,3,4,5,6";

console.debug("Main Stack: start");

convertStringToArray(stringToProcess, function (convertedString){
    convertToObject(convertedString, function(objectOfStrings){
        resetObjectValues(objectOfStrings, function(object){
            console.debug(object);
        });
    });   
});

console.debug("Main Stack: end");



// Functions

function resetObjectValues(object, callback){
    for(var key in object){
        object[key] = "X";
    }

    setTimeout(function thirdcb(){
        callback(object);
    }, 500);
}

function convertToObject(string, callback){
    var object = {};
    string.map(function(current, index){
        object[index] = current;
    });

    setTimeout(function secondcb(){
        callback(object);
    }, 500);
}

function convertStringToArray(string, callback){
    var delimiter = ",";
    var arrayString = string.split(delimiter);

   setTimeout(function firstcb(){
        callback(arrayString);
    }, 500);

}

/* Promise Heaven... */


// Main

var stringToProcess = "1,2,3,4,5,6";

console.debug("Main Stack: start");

var promise;
promise = convertStringToArray(stringToProcess);
promise.done(function(string){
   promise = convertToObject(string);
   promise.done(function(object){
       promise = resetObjectValues(object);
       promise.done(function(object){
           console.debug(object);
       })
   })
});

console.debug("Main Stack: end");

// Functions

function resetObjectValues(object, callback){
    var deferred = $.Deferred();
    for(var key in object){
        object[key] = "X";
    }

    setTimeout(function thirdcb(){
        deferred.resolve(object);
    }, 500);

    return deferred.promise();
}

function convertToObject(string){
    var deferred = $.Deferred();
    var object = {};
    string.map(function(current, index){
        object[index] = current;
    });

    setTimeout(function secondcb(){
        deferred.resolve(object);
    }, 500);

    return deferred.promise();
}

function convertStringToArray(string){
    var deferred = $.Deferred();
    var delimiter = ",";
    var arrayString = string.split(delimiter);

   setTimeout(function firstcb(){
       deferred.resolve(arrayString);
    }, 500);

    return deferred.promise();

}

这就是我试图让它变得更好的方式：

/* Callback Hell !? */

// Main

var stringToProcess = "1,2,3,4,5,6";

console.debug("Main Stack: start");

convertStringToArray(stringToProcess, function (convertedString){
    convertToObject(convertedString, function(objectOfStrings){
        resetObjectValues(objectOfStrings, function(object){
            console.debug(object);
        });
    });   
});

console.debug("Main Stack: end");



// Functions

function resetObjectValues(object, callback){
    for(var key in object){
        object[key] = "X";
    }

    setTimeout(function thirdcb(){
        callback(object);
    }, 500);
}

function convertToObject(string, callback){
    var object = {};
    string.map(function(current, index){
        object[index] = current;
    });

    setTimeout(function secondcb(){
        callback(object);
    }, 500);
}

function convertStringToArray(string, callback){
    var delimiter = ",";
    var arrayString = string.split(delimiter);

   setTimeout(function firstcb(){
        callback(arrayString);
    }, 500);

}

/* Promise Heaven... */


// Main

var stringToProcess = "1,2,3,4,5,6";

console.debug("Main Stack: start");

var promise;
promise = convertStringToArray(stringToProcess);
promise.done(function(string){
   promise = convertToObject(string);
   promise.done(function(object){
       promise = resetObjectValues(object);
       promise.done(function(object){
           console.debug(object);
       })
   })
});

console.debug("Main Stack: end");

// Functions

function resetObjectValues(object, callback){
    var deferred = $.Deferred();
    for(var key in object){
        object[key] = "X";
    }

    setTimeout(function thirdcb(){
        deferred.resolve(object);
    }, 500);

    return deferred.promise();
}

function convertToObject(string){
    var deferred = $.Deferred();
    var object = {};
    string.map(function(current, index){
        object[index] = current;
    });

    setTimeout(function secondcb(){
        deferred.resolve(object);
    }, 500);

    return deferred.promise();
}

function convertStringToArray(string){
    var deferred = $.Deferred();
    var delimiter = ",";
    var arrayString = string.split(delimiter);

   setTimeout(function firstcb(){
       deferred.resolve(arrayString);
    }, 500);

    return deferred.promise();

}

---

…遗憾的是，.done（）代码看起来几乎和“地狱”代码一样糟糕。我不知道我们如何正确地将承诺/延期的回报连成链。我看到了一些教程，其中没有函数调用的参数。但是我有一些论点要提出，那么如何处理呢？

承诺的链条应该是这样的：

convertStringToArray(stringToProcess)
  .then(function(string){
    return convertToObject(string);
  })
  .then(function(object){
    return resetObjectValues(object);
  })
  .then(function(object){
    console.debug(object);
  });

---

基本上，每个（回调）函数都返回一个新的承诺，然后可以使用该承诺将其他处理程序附加到该函数。这样，您就不需要像代码中那样嵌套回调了。

承诺链应该看起来像这样：

convertStringToArray(stringToProcess)
  .then(function(string){
    return convertToObject(string);
  })
  .then(function(object){
    return resetObjectValues(object);
  })
  .then(function(object){
    console.debug(object);
  });

---

基本上，每个（回调）函数都返回一个新的承诺，然后可以使用该承诺将其他处理程序附加到该函数。这样，您就不需要像代码中那样嵌套回调。

代码只是为了演示，因为它根本不需要异步。您应该使用而不是

done

，这样您就可以：

convertStringToArray（stringToProcess）。然后（convertToObject）。然后（resetObjectValues）。然后（console.debug.bind（console））

是您的代码，仅用于演示目的，因为它根本不需要异步。您应该使用而不是

done

，这样您就可以：

convertStringToArray（stringToProcess）。然后（convertToObject）。然后（resetObjectValues）。然后（console.debug.bind（console））除了使用
done
不起作用之外。只有
then
方法返回新的承诺和链。除了使用
done
不起作用之外。只有
then
方法返回新的承诺和链。