Javascript如何在forEach完成执行后运行一些代码

Question

So I want to turn my "loading" gif on and off with ng-show . I would specifically like to turn it off after my script is done loading the array through a forEach .

How do I run code when the forEach completes its entire cycle". Something similar to a .then() , but for for loops

function selectAll(bool) {
  vm.selectAllSpinner = true;
  vm.practicesLeftCol = [];
  if(bool === true){
    vm.practices.forEach(function(practice){
      practice.selected = true;
      vm.practicesLeftCol.push(practice)
    })
    I want this after the foreach ->vm.selectAllSpinner = false;

  } else if (bool === false){
    vm.practices.forEach(function(practice){
      practice.selected = false;
      vm.practicesLeftCol = [];
    })
    I want this after the foreach ->vm.selectAllSpinner = false;

  }

Answer 1

So forEach isn't asynchronous. As such, you could literally just write:

function selectAll(bool) {
          vm.selectAllSpinner = true;
          vm.practicesLeftCol = [];
          if(bool === true){
            vm.practices.forEach(function(practice){
              practice.selected = true;
              vm.practicesLeftCol.push(practice)
            })
          } else if (bool === false){
            vm.practices.forEach(function(practice){
              practice.selected = false;
              vm.practicesLeftCol = [];
            })
          }
    vm.selectAllSpinner = false;
}

Having said that, I think the code could be cleaned up in general to be more like so:

  function selectAll(bool) {
    vm.selectAllSpinner = true;
    vm.practicesLeftCol = [];
    if (bool) {
      vm.practicesLeftCol = vm.practices.reduce(function(memo, practice) {
        practice.selected = true;
        memo.push(practice);
        return memo;
      }, []);
    }
   vm.selectAllSpinner = false; 
}

Again, neither reduce nor forEach are asynchronous, so this should just kinda work...

Answer 2

In Javascript, use the semicolon ( ; ) delimiter, optionally followed by a newline, to append a command to a previous command. Thus

function selectAll(bool) {
    vm.selectAllSpinner = true;
    vm.practicesLeftCol = [];
    if(bool === true){
        vm.practices.forEach(function(practice){
            practice.selected = true;
            vm.practicesLeftCol.push(practice)
        });
        vm.selectAllSpinner = false;  //<---
    } else if (bool === false) {
        vm.practices.forEach(function(practice){
            practice.selected = false;
            vm.practicesLeftCol = [];
        });
        vm.selectAllSpinner = false; //<---
    }
}

Answer 3

Unfortunately forEach does not have a callback - but you could do something like this:

  if(bool === true){
        vm.practices.forEach(function(practice){
          practice.selected = true;
          vm.practicesLeftCol.push(practice);
           items++;
           if(items === your_array.length) {
             vm.selectAllSpinner = false;
           }
        })

      }