JSFiddle - React, Tailwind, and code Playground

by Denis Antonenko

HTML

<script src="//vk.com/js/api/openapi.js"></script>
<table id ='data'>
</table>

JavaScript

VK.init({
    apiId: 5545265
  });

var helpers = {
	getFriends:function(user_id, callback){
      VK.api('friends.get',{
          user_id:user_id,
          fields:'nickname, domain, sex, bdate, city, country, photo_100,photo_200_orig'
        },function(ret){
        	if(ret.response === undefined){
          	if(ret.error.error_code === 15){
          		callback([]);
          	}else{
             callback(undefined); 
            }
          }else{
          	callback(ret.response);
          }
        });
  },
  friendToString:function(friend){
  	return friend.first_name + ' ' + friend.last_name
  }
};

var consumer = {
	array: null,
  interval:6000,
	consume:function(source, callback, interval){
  	var me = this;
		this.array = source;
    this.interval = interval;
    setTimeout(function(){ me.subConsume(callback); }, interval);
  },
  subConsume:function(callback){
  	var me = this;
  	var item = me.array.pop();
  	if(!!item){
    	console.log('there are left:' + me.array.length);
    	callback(item);
      setTimeout(function(){ me.subConsume(callback); }, me.interval);
    }else{
    	alert('done!!!');
    }
  }
};

var tracker = {};

VK.Auth.login(function(ret){
  if(ret.status === 'connected')
  {
  	helpers.getFriends(41115465,function(friends){
         
          consumer.consume(friends, function(friend){
            helpers.getFriends(friend.user_id, function(subfriends){
            	if(subfriends === undefined){
              consumer.array.push(friend);
              }else{
                for(var j =0; j<subfriends.length; j++){
                  var subfriend = subfriends[j];
                  if(!tracker[subfriend.user_id]){
                  
                    var $tr = $('<tr>');
                     $tr.append(
                        $('<img>',{src:subfriend.photo_200_orig || subfriend.hoto_100})
                      );
                      $tr.append(
                        $('<td>').text(subfriend.first_name)
                  ...