Skip to content

Delaying or pausing the execution of a jQuery .each() loop

Last Updated: April 14, 2019

Recently, I wrote a scraper app which fetches a series of pages, pulls all of the <img /> tags into a list and then downloads them to the user’s computer.

(Back story: we often work with clients who want to transfer their website away from a closed-source provider like Squarespace. These providers often do not provide a tidy way to export all of your content, say, all of the media that you might have uploaded over the months or years.)

My program made use of jQuery to save the files, which allowed me to iterate over the list of files with AJAX (avoiding timeouts for larger file sets) and manipulate the DOM in the process.

However, in order to avoid triggering any protective measures on the host server (many platforms discourage scraping of their resources, for obvious reasons), I also wanted to interject a randomized delay into the series of requests.

I spent the better part of an hour working through various StackOverflow solutions, before I finally stumbled an approach that did the trick. I may post the entire scraper to a shared GitHub repo soon, but in the meantime:

jQuery( function() {

	WPDG_Scraper.admin = {

		bind: function() {

			var self = this;

			jQuery( '.wpdg-scraper-image-to-download' ).each( function( index ) {

				var listItem = jQuery( this );

				// "sleep" to avoid triggering anti-scraping measures
				var delay = Math.floor( Math.random() * 500 ) + ( index * 500 );
				setTimeout( function() {
					self.download( listItem );
				}, delay );

			});

		}

		// other code goes here

	}

	WPDG_Scraper.admin.bind();

});

Chris Aram

I'm a developer who specializes in whipping your technology into shape so that it makes your professional and personal life better.