javascript - Why is only the last object's function getting called here? -
wow. figured causing bug, can't figure out why. have object property (excuse massive code dump)
// relatives second indices in video events // called when video reaches second this.pausepoints = [ { sec: 10, name: "point number 1", passed: false, func: (function(that) { this.$layer = that.getlayerelement(10); this.$layer.hide(); this.to = function () { that.videlem.pause(); // pause video $(window).resize(); // re-proportion stuff // point 3 mouse pointers var $mptrs = this.$layer.find('.filmstrip-pointer'); (var = 0; < $mptrs.length; ++i) { (function (j) { settimeout(function () { point($mptrs.eq(j)); }, j * 1000); })(i); } }; // attach click event 3 sections $clickregions = $layer.find('div.click-region'); $clickregions.click(function(){ $clickregions.removeclass('clicked'); $(this).addclass('clicked'); }); this.away = function () { this.$layer.hide(); } // attach event next button $layer.find('.next-btn').click(function(){ this.away(); that.videlem.play(); }.bind(this)); return this; })(this) }, { sec: 26, name: "point number 2", passed: false, func: (function(that) { this.$layer = that.getlayerelement(26); this.$layer.hide(); this.to = function () { // loop video between 0:26-0:31 this.loop = setinterval(function () { that.videlem.currenttime = 26; that.videlem.play(); }, 5000); // point 3 mouse pointers var $mptrs = this.$layer.find('.filmstrip-pointer'); (var = 0; < $mptrs.length; ++i) { (function (j) { settimeout(function () { point($mptrs.eq(j)); }, j * 1000); })(i); } this.$layer.show(); } // separate pargraph words spans this.$layer.find('p').each(function () { var spanned = $(this).text().split(" ").map(function (w) { return '<span class="word">' + w + '</span>'; }).join(" "); $(this).html(spanned); }); // add event click event on headlines var timeouts = []; this.$layer.find('h3').click(function () { // clear current 'showing' animations timeouts.foreach(function(t){ cleartimeout(t); }); timeouts = []; // unshow words on slide this.$layer.find('span.word').removeclass('shown'); // show words associated headline clicked var $wspans = $(this).closest('.tower-layer').find('span.word'); ( var = 0; < $wspans.length; ++i ) { (function(j){ timeouts.push(settimeout(function(){ $wspans.eq(j).addclass('shown'); },j*100)); })(i); } }.bind(this)); this.away = function () { clearinterval(this.loop); this.$layer.find('span.word').removeclass('shown'); $layer.hide(); that.videlem.currenttime = 31;//go end of loop }; // set action of "next" button this.$layer.find('.next-btn').click(function () { this.away(); that.videlem.play(); }.bind(this)); return this; })(this) }, { sec: 38, name: "point number 3", passed: false, func: (function(that) { this.$layer = that.getlayerelement(38); this.$layer.hide(); this.to = function ( ) { // loop video between 0:38-0:43 this.loop = setinterval(function () { that.videlem.currenttime = 38; that.videlem.play(); }, 5000); this.$layer.show(); } this.away = function(){ clearinterval(this.loop); this.$layer.hide(); }; this.$layer.find('.next-btn').click(function(){ that.videlem.currenttime = 43; this.away(); that.videlem.play(); }.bind(this)); return this; })(this) }, { sec: 47, name: "point number 4", passed: false, func: (function(that){ this.$layer = that.getlayerelement(47); this.$layer.hide(); this.to = function () { // loop video between 0:47-0:52 this.loop = setinterval(function() { that.videlem.currenttime = 47; that.videlem.play(); }, 5000); // show layer this.$layer.show(); } this.away = function () { clearinterval(this.loop); this.$layer.hide(); }; this.$layer.find('.next-btn').click(function () { that.videlem.currenttime = 52; this.away(); that.videlem.play(); }.bind(this)); return this; })(this) }, { sec: 57, name: "point number 5", passed: false, func: (function(that){ this.$layer = that.getlayerelement(57); // hide this.$layer.hide(); this.to = function () { // loop video between 0:57-1:02 this.loop = setinterval(function () { that.videlem.currenttime = 57; that.videlem.play(); }, 5000); this.$layer.show(); } this.away = function(){ clearinterval(this.loop); $layer.hide(); }; this.$layer.find('.next-btn').click(function () { that.videlem.currenttime = 62; this.away(); that.videlem.play(); }.bind(this)); return this; })(this) } ]; and i'm noticing when try call of to functions calls 1 in last element of array.
for example,
vidhandler.pausepoints[0].func.to() calls
this.to = function () { // loop video between 0:57-1:02 this.loop = setinterval(function () { that.videlem.currenttime = 57; that.videlem.play(); }, 5000); this.$layer.show(); } instead of expected
this.to = function () { that.videlem.pause(); // pause video $(window).resize(); // re-proportion stuff // point 3 mouse pointers var $mptrs = this.$layer.find('.filmstrip-pointer'); (var = 0; < $mptrs.length; ++i) { (function (j) { settimeout(function () { point($mptrs.eq(j)); }, j * 1000); })(i); } }; why happening , how can fix it?
the problem you're trying assign func using invoked function expression (iife). iifes executed before object constructed, meaning this refers else. code can broken down this:
this.to = function() { // version "point number 1" }; this.to = function() { // version "point number 2" // notice you're overwriting previous 1 }; // repeat points var self = this; this.pausepoints = [ { name: "point number 1", func: self }, // repeat points ]; so you're doing assigning to value same object has pausepoints property.
Comments
Post a Comment