Cant call funtion after 3 seconds Angular 4

Question

The code is working fine but when i try to call getUsersChats again if there is a new message to display a badge,

i cant as it is giving me this error,

 "ERROR TypeError: Cannot read property 'getUsersChat' of undefined"

getUsersChat function

 getUsersChat() {

    let clientsKeys: Array < any > ;

    let i = 0;
    // tslint:disable-next-line:prefer-const
    let key: any;

    this.mySegService.getChats().subscribe(res => {

      this.clientsShortList = new Array < any > ();
      clientsKeys = Object.keys(res);

      this.totalNumberClients += clientsKeys.length;

      clientsKeys.forEach(clientKey => {

        if (i < ++i && res[clientKey]['messages'] !== undefined ) {
          this.clientsShortList.push({
            name: res[clientKey]['name'],
          });
        }

        if (res[clientKey]['name'] === this.chatcheck ) {

          this.clientsShortList = new Array < any > ();
          this.clientsShortList.push({
            name: res[clientKey]['name'],
            number: this.compare
          });
        }
        this.clientsShortList.reverse();
        console.log(this.clientsShortList);

      });

    });
    this.newmessageNumber(this.clientsShortList);
  }

here is where the error comes on the setTimeout(() =>... what im doing wrong here, any help would be nice

newmessageNumber(array: any) {
     // tslint:disable-next-line:no-shadowed-variable
     let element;
     let i = 0;

    for (let index = 0; index < array.length; index++) {
      element = array[index]['name'];
    }

    this.mySegService.getChatsLast().subscribe(res => {
       try {
        localStorage.setItem('user', res[0]['user']);
       } catch (error) {
        // nd
       }
       this.chatcheck = localStorage.getItem('user');
      // console.log(this.chatcheck);
       if (this.chatcheck === element ) {
            this.compare = '1';
      }
    });

    for ( i ; i < 3; i++) {

      (function(i) {
          setTimeout(() => {
            this.getUsersChat();
          }, 1000 * i);
      })(i);
  }


 }

Can someone help me out on this.

Combined duplicate of https://stackoverflow.com/questions/6847697/how-to-return-value-from-an-asynchronous-callback-function, https://stackoverflow.com/questions/16796918/what-does-this-refer-to-in-a-javascript-function — baao, Jun 06 '18 at 11:55
Why do you have `setTimeout()` inside the loop? It will create 3 different counters. You can just call the function without a loop, and simply call it with `setTimeout(()=> {this.getUsersChat();}, 3000});` — mutantkeyboard, Jun 06 '18 at 11:55
if i do it wont stop calling the function, i just want bo te executed just 3 times — Kevin Dias, Jun 06 '18 at 12:00

manish kumar · Answer 1 · 2018-06-06T12:10:46.560

because the getUsersChat is not in the this scope inside setTimeout

try preserving the scope of this and using like this.

newmessageNumber(array: any) {
     // tslint:disable-next-line:no-shadowed-variable
     let element;
     let i = 0;

    for (let index = 0; index < array.length; index++) {
      element = array[index]['name'];
    }

    this.mySegService.getChatsLast().subscribe(res => {
       try {
        localStorage.setItem('user', res[0]['user']);
       } catch (error) {
        // nd
       }
       this.chatcheck = localStorage.getItem('user');
      // console.log(this.chatcheck);
       if (this.chatcheck === element ) {
            this.compare = '1';
      }
    });
    var self=this;
    for ( i ; i < 3; i++) {

      (function(i) {
          setTimeout(() => {
            self.getUsersChat();
          }, 1000 * i);
      })(i);
  }


 }

I see, it works thanks but it does not exit the loop is calling the method every one second and not doing exit — Kevin Dias, Jun 06 '18 at 13:37

score 0 · Accepted Answer · answered Jun 06 '18 at 14:14

solved by doing this

 getUsersChat() {

        let clientsKeys: Array < any > ;

        let i = 0;
        // tslint:disable-next-line:prefer-const
        let key: any;
        // tslint:disable-next-line:no-shadowed-variable
        let element: any;

        this.mySegService.getChats().subscribe(res => {

          this.clientsShortList = new Array < any > ();
          clientsKeys = Object.keys(res);

          this.totalNumberClients += clientsKeys.length;

          clientsKeys.forEach(clientKey => {

            if (i < ++i && res[clientKey]['messages'] !== undefined) {
              this.clientsShortList.push({
                name: res[clientKey]['name'],
              });
            }


            if (res[clientKey]['name'] === this.chatcheck) {
              this.clientsShortList = new Array < any > ();
              this.clientsShortList.push({
                name: res[clientKey]['name'],
                number: '1'
              });
            }

            this.clientsShortList.reverse();
            console.log(this.clientsShortList);
          });

        });
        // this.newmessageNumber(this.clientsShortList);
        for (let index = 0; index < this.clientsShortList.length; index++) {
          element = this.clientsShortList[index]['name'];
        }

        this.mySegService.getChatsLast().subscribe(res => {
          // console.log(res);
          try {
            localStorage.setItem('user', res[0]['user']);
          } catch (error) {
            // nd
          }
          this.chatcheck = localStorage.getItem('user');
          console.log(this.chatcheck);
          if (this.chatcheck === element) {
            this.getUsersChat();
          }

        });



}

Cant call funtion after 3 seconds Angular 4

2 Answers2