Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by John Weland
John Weland
42,478 Points

Functions firing out of order

I am building a bit of code to embed twitch streams into my website. The problem is the code is firing out of order.

in my application.js file I call the object then its 2 functions. getVideos and setUI

application.js 
    twitch = new twitchStream('amd');
    twitch.getVideos();
    twitch.setUI();

however with some console.log() I am seeing that setUI is firing off before getVideos. I tried to go at this from a Promise aspect and totally fudged the code so reverted back to this.

twitch.js 
"use strict";

function twitchStream(user) {
  this.user = user
  this.baseurl = 'https://api.twitch.tv/kraken/',
  this.clientID = '##############',
  this.videoID = null
}

twitchStream.prototype.isLive = function() {
  $.ajax({
    type: 'GET',
    url: this.baseurl + 'streams/' + this.user +'/',
    dataType: 'json',
    headers: {
      'client-ID': this.clientID
    },
    success: function(response) {
      var bool = response.stream === null ? false : true;
      console.log("isLive? " + bool);
      return bool;
    },
    error: function(jqXHR, textStatus, errorThrown) {
      console.log("ERROR: " + errorThrown);
    }
  });
}
twitchStream.prototype.getVideos = function() {
  $.ajax({
    type: 'GET',
    url: this.baseurl + 'channels/' + this.user + '/videos/',
    dataType: 'json',
    headers: {
      'client-ID': this.clientID
    },
    success: function(response) {
      this.videoID = response.videos[0]._id;
      console.log("From getVideos: videoID is " + this.videoID);
    },
    error: function(jqXHR, textStatus, errorThrown) {
      console.log("ERROR: " + errorThrown);
    }
  });
}
twitchStream.prototype.setUI = function() {
  console.log("From setUI: videoID is " + this.videoID);
  if (twitch.isLive === true) {
    var options = {
        width: '',
        height: '',
        muted: true,
        playsinline: true,
        channel: this.user      
    };
  } else {
    var options = {
        width: '',
        height: '',
        muted: true,
        playsinline: true,
        video: this.videoID
      };
  }
  var player = new Twitch.Player("twitchVideo", options);
  player.setVolume(0.5);
  player.addEventListener(Twitch.Player.PAUSE, () => { console.log('Player is paused!'); });
}

I've also tried having getVideos simply return the ID and have setUI call it but its coming back still out of order.

Any help is appreciated.

1 Answer

Kenneth Kinsey
Kenneth Kinsey
14,897 Points
Kenneth Kinsey
Kenneth Kinsey
14,897 Points

Ajax is asynchronous, so it's not going to wait for your .getVideos() function to finish before firing off .setUI(). It may be best for you to use .setUI() in the success callback in .getVideos() if that's when you want it to fire off.

John Weland
John Weland
42,478 Points

my isLive check seems to throw the whole thing off.

if I do 

var response.stream = null;  //|| var response.stream = [ANYTHING ELSE}; 
twitchStream.prototype.isLive = function() {
      return response.stream === null ? false : true;
}

for example I get true or false... having the ajax call success return something I get undefined

twitchStream.prototype.isLive = function() {
  $.ajax({
    type: 'GET',
    url: this.baseurl + 'streams/' + this.channel +'/',
    dataType: 'json',
    headers: {
      'client-ID': this.clientID
    },
    success: function(response) {
      return response.stream === null ? false : true;
    },
    error: function(jqXHR, textStatus, errorThrown) {
      console.log("ERROR: " + errorThrown);
    }
  });
}