角度：Observable.subscribe取消同步怪异错误

Question

I tried to do a lot of queries in a loop using this:

  buildQuestions() { for(var i = 0;i<this.sections.length;i++) { this.serviceQue.getQuestionsBySectionId(this.sections[i].section_id) .subscribe(rt => this.sections[i].questions=rt, er => console.log(er), () => console.log("OK")); } } 

The problem is that when subscribe call the line rt => this.sections[i].questions=rt, i doesnt have the same value, then send error because for some i, this.sections[i] is undefined.

For example if i have 1 section and i at the start is 0, then it call this.serviceQue.getQuestionsBySectionId(this.sections[i].section_id) with i = 0, but .subscribe(rt => this.sections[i].questions=rt is excecuted with i = 1, i tried to do something like manual sync using this code:

  buildQuestions() { var last = -1; for(var i = 0;i<this.sections.length;) { if(last!=i) { last = i; this.serviceQue.getQuestionsBySectionId(this.sections[i].section_id) .subscribe(rt => this.sections[i].questions=rt, er => console.log(er), () => i++); } } } 

but, for some weird reason, when i do that, this.serviceQue.getQuestionsBySectionId(this.sections[i].section_id) never send a response and do a infinite loop, if i use the first code it send a response, but if i use the second code it never send a response.

someone can help me?

Answer 1

Yes, that's exactly how JS works. When the callback is executed the loop has already finished so i will have the length value. You have to put your code in a closure:

buildQuestions() {

    this.sections.forEach(section => {
        this.serviceQue.getQuestionsBySectionId(section.section_id)
            .subscribe(rt => section.questions = rt,
                er => console.log(er),
                () => console.log("OK"));
        }
    });      
}

More info about this issue: Here you have the explanation of why is this happening: https://hackernoon.com/how-to-use-javascript-closures-with-confidence-85cd1f841a6b

By the way, this is a classic job interview question