Question

I have a plugin structured according to the boiler plate suggested here:

http://markdalgleish.com/2011/05/creating-highly-configurable-jquery-plugins/

the plugin is responding as I want in Chrome, but I am getting Internet Explorer and FireFox errors

You can view the plugin in use here http://websonalized.com/myplugin.php

ERROR IN MSIE developer console (debugging):

Invalid argument myplugin.js, line 84 character 5

ERROR IN FIREFOX:

Error: useless setTimeout call (missing quotes around argument?)

setTimeout(animateSlide(sliderImage), 3000);

THIS IS THE RELEVANT BIT OF CODE

...

this.$slides.each(function(i){

    slide_config = $.extend({
        duration: 3000,
        squares: 225, //it will display the closest 'perfect square' number of tiles
        transition: 'linear'
    }, $(this).data());

    var sliderImage = $(this).find('.slidebg');

    ...

    setTimeout(animateSlide(sliderImage), 3000);

    function animateSlide(s){
        console.log('ANIMATED IMAGE SLIDER ' + i);
        console.log(s); 

        $(s).show('explode', { pieces: slide_config.squares }, 5000);
    };

    ...

The errors are gone if I rewrite the setTimeout bit to:

...

this.$slides.each(function(i){

    slide_config = $.extend({
        duration: 3000,
        squares: 225, //it will display the closest 'perfect square' number of tiles
        transition: 'linear'
    }, $(this).data());

    var sliderImage = $(this).find('.slidebg');

    ...

    setTimeout(function(){$(sliderImage).show('explode', { pieces: slide_config.squares }, 5000);}, 3000);              


    ...

But the value of slide_config.squares does not correspond to the this instance, and rather the value is the one set by the last slide data

this.$slides.each(function(i){

    slide_config = $.extend({
        duration: 3000,
        squares: 225, //it will display the closest 'perfect square' number of tiles
        transition: 'linear'
    }, $(this).data());

I imagine this has to do with context. can anyone help me fix and understand how should I use setTimeoff?

Fix means I am able to setTimeout w/o errors in browsers FF, IE and Chrome while the slide_config.squares value for each instance equals either the one set by each slide object or the defaults (i.e. slide_default )

NOTE: with the first code sample the value of slide_config.squares is what I expected, i.e. set according to slide object or slide_config defaults. Again, the code appears to work fine in Google Chrome with first bit of code

Answer 1

You need to declare slide_config as a local variable within the each() callback by writing

var slide_config = ...;

This will give each setTimeout closure its own copy of the variable, rather than having them all share a global.