I’m trying to make a jQuery plugin that executes a method on a timer. I’d like it to work on multiple elements on a page independently. I’ve reached a point where the timer executes for each element, but the method called in the setTimeout seems to only know about the last instance of the plugin.
I know I’m doing something fundamentally stupid here, but I’m danged if I know what. I know stuff like this has been asked 8 million times on here before, but I’ve not managed to find an answer that relates to my specific problem.
Here’s a script that demonstrates the structure of what I’m doing.
<html>
<head>
<script type="text/javascript" src="assets/jquery.min.js"></script>
<script type="text/javascript">
var crap = 0;
(function($)
{
jQuery.fn.pants = function(options) {
var trousers = {
id: null,
current: 0,
waitTimeMs: 1000,
begin: function() {
var d = new Date();
this.id = crap++;
console.log(this.id);
// do a bunch of stuff
window.setTimeout(function(self) {return function() {self.next();}}(this), this.waitTimeMs);
},
next: function() {
this.current ++;
console.log(this.id);
window.setTimeout(function(self) {return function() {self.next();}}(this), this.waitTimeMs);
},
};
options = options || {};
$.extend(trousers, options);
this.each(function(index, element) {
trousers.begin();
});
return this;
};
}
)(jQuery);
jQuery(document).ready(function() {
jQuery("div.wahey").pants();
});
</script>
</head>
<body>
<div class="wahey"></div>
<div class="wahey"></div>
</body>
</html>
The output I get is this:
0
1
1
1
1
1
The output I expect to get is this:
0
1
0
1
0
1
It could be that you’re using ‘this’ which is browser specific and doesn’t always point to what you want it to point to. This belongs to the owner of the function, not the object of the function.