Asynchronous vs synchronous in javascript

you often see the terms asynchronous and synchronous in javascript. there is significant difference between the 2 and it affects the way you code. When executing something synchronously, you wait for it to finish before moving on. When executinge something asynchronously, you move on to the next task before it finishes.

google map geocoding is asynchronous for example, so you need to pass a callback method to execute upon completion of the request

Delaying until condition is fulfilled

In javascript, we can use setTimeout to do call itself recursively until a condition is met.

Here, we want to check the html content with an interval of 300ms until it is populated, then we will do something.

function checkPostCode() {
	
	if ($('#my_postcode').html() == '') {
		setTimeout(function() {
			checkPostCode();
		}, 300);
	}
	else {
		$('#nearest_store').html('some content');
		return;
	}
}
checkPostCode();

Simple way to redirect user if Mobile

Javascript can detect screen size and redirect users if they are using mobile. I’ve found that checking the screen size and redirecting users based on that can cover 99% of the use cases rather than injecting some complicated browser detection javascript libraries.

The screen width of IPAD is 768px and screen width of a bigger mobile is 500px. So it would be safe to say that you anyone browsing the site using mobile phone would have a resolution lesser than 700px.

A simple script like that will work

if (screen.width <= 700) {
  window.location = "http://your-mobile-site";
}

Opening and controlling a new popup window

we can assign a var to the window.open method and control the popup. but in order for it to work, remember to use to “opener” method or else it will fail in firefox.

for example,

var d = window.open('../popup/'+url,  'popup', 'width=1024, height=1024, scrollbars=1');
d.opener.location.reload(true);

quick and simple ajax loading or please wait screen

Traditionally, you would show an animated gif when doing ajax call to let user know that they have to wait to see some results. We do this by showing and hidding the animated gif in a div for example.

Actually if you are rushing for time, a quicker and simpler solution is to change the mouse cursor. Not that fancy but it works. Users should be familiar with different types of mouse pointer. In the jQuery.ajax function for example, we can do something like so:

 jQuery('*').css('cursor','wait');

and after the ajax call

 jQuery('*').css('cursor','auto');

Javascript: check if url is a substring of another url

If I want to find out is a url is a substring of another url, for example whether

http://blarblar.com/?abc=1

is a substring of

http://blarblar.com/?abc=1&page=2&r=3

doing a indexOf or substr wouldn’t work because there are special characters in the string. Javascript does not yet have proper library to do this, we have to either depend on 3rd party libraries or come up with our own. A simple way to do it is to split the url into 2 parts, ie pathname and query. We then need to match the pathname and query like so:

function getp(locator, name){
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");  
  var regexS = "[\\?&]"+name+"=([^&#]*)";  
  var regex = new RegExp( regexS );  
  var results = regex.exec( locator.href ); 
  if( results == null )    
    return '';  
  else    
    return results[1];
}

// say link is link1
var link = document.createElement('a');
link.href = 'http://blarblar.com/?abc=1'
// this is the second link, say its the original url
win = window.location;
// if the pathname is the same and param is the same, a match is found
if ((link.pathname == win.pathname) && ( getp(link, 'abc') == getp(win, 'abc'))) {
  // a match is found, do something
}