Skip to content

simple lightweight preloader queue for handling multiple asynchronous functions

License

Notifications You must be signed in to change notification settings

kmjayadeep/preloaderQ

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

PreloaderQ

PreloaderQ is a javascript plugin that be used to track the flow of asynchronous/ synchronous tasks, mainly designed to show/hide loading gif on websites running multiple ajax requests

NPM

npm

Installation

from npm

npm install preloaderq --save
const PreloaderQ = require('preloaderq')
const preloader = new PreloaderQ(initialQueue)

in browser

var preloader = new PreloaderQ(initialQueue)

Usage

initialize

var preloader = new PreloaderQ()

with initial array of tasks

var preloader = new PreloaderQ(['load page'])

setup callbacks

preloader.setEmptyCallback(function(id){
	console.log('queue is empty; removed ',id)
})

preloader.setFirstTaskCallback(function(id){
	console.log('started first task',id)
})

preloader.setEnqueueCallback(function(id){
	console.log('enqueued',id)
})

preloader.setDequeueCallback(function(id){
	console.log('dequeued',id)
})

enqueue and dequeue tasks

var preloader = new PreloaderQ(['load page'])
//setup callbacks
...
preloader.enqueueTask('load student details')
loadStudentDetailsAsync(function(data){
	preloader.dequeueTask('load student details')
	//do stuff
})

Use case 1:

A website needs to show a loading gif image whenever something is executing in background (ajax request maybe). If there are multiple ajax requests running in parallel, we need to track the starting of first ajax call and ending of all calls in order to show and hide the loading bar

var preloader = new PreloaderQ()
preloader.setEmptyCallback(function(){
	//no active tasks
	$('#loader').hide()
})
preloader.enqueueTask('load page')

preloader.setFirstTaskCallback(function(){
	//started first task
   	$('#loader').show()
})

$(document).ready(function() {
	preloader.dequeueTask('load page')
})

preloader.enqueueTask('load student details')
loadStudentDetailsAsync(function(data){
	preloader.dequeueTask('load student details')
	//do stuff
})

About

simple lightweight preloader queue for handling multiple asynchronous functions

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published