javascript中带有延迟的链接方法

Question

I'm attempting to make this piece of code more efficient.

(function() { 
    sc = angular.element('tbody').scope(); sc.draft.resetRoster(); sc.$apply(); 
    setTimeout(function() {
        sc.draft.rosterAdd({id: "12921", salary: 10600, position: "P"});sc.draft.rosterAdd({id: "12123", salary: 2900, position: "C"});sc.draft.rosterAdd({id: "5435", salary: 3800, position: "1B"});sc.draft.rosterAdd({id: "12562", salary: 2400, position: "2B"});sc.draft.rosterAdd({id: "38321", salary: 3100, position: "3B"});sc.draft.rosterAdd({id: "6319", salary: 2400, position: "SS"});sc.draft.rosterAdd({id: "5204", salary: 3200, position: "OF"});sc.draft.rosterAdd({id: "5222", salary: 2500, position: "OF"});sc.draft.rosterAdd({id: "12462", salary: 2600, position: "OF"});
    }, 3000);
    setTimeout(function() {
        document.querySelector('#enterButton').click();
    }, 6000);
})();

I'm not entirely familiar with Angular (actually not at all). I'm trying to create a client-side script that interacts with Angular. There's 5 total statements here that I'm trying to condense into as little code as possible. Before the first setTimeout gets triggered in 3,000ms, I need this to run: sc = angular.element('tbody').scope(); sc.draft.resetRoster(); sc.$apply(); sc = angular.element('tbody').scope(); sc.draft.resetRoster(); sc.$apply();

After 3,000ms, the first setTimeout runs. Roughly 6,000ms (assuming there's roughly a ~3,000ms gap between the first setTimeout and second setTimeout ) I need the second setTimeout to execute.

Is there a better way to put together this function? Less code? Better sequencing of how I'm handling setTimeout in general?

Answer 1

Instead of setTimeout use angular service $timeout which functions similarly but returns a promise that will be resolved after the specified amount of time has elapsed, and also calls $apply . So in your case:

$timeout(function () { ... }, 3000).then(function () {
    //after the first timeout we set another one and return its promise
    $timeout(function () { ... }, 3000);
});

This way you get rid off the mental arithmetic and you can just set the time you want to wait after the last timeout has elapsed, without nesting timeout functions.