javascript - jQuery hover images carousel timeout overlaps -
i'm building webpage shows products. when hovering on product image, slideshow-like event should start. you'll see photo's of product in several states. i've coded jquery , i'm facing kinda annoying bug.
when hover on several products fast , leave mouse on 1 product, slide through images fast.
the html structure looks this:
<div class="products"> <div class="productcontainer" data-product-id="1"> <img src="http://detestdivisie.nl/upload/images/hover-tests/inside/bmw-inside.jpg" class="mainproductimage" /> <div class="hoverimages"> <img src="" data-lazy-src="http://detestdivisie.nl/upload/images/hover-tests/inside/bmw-inside-1.jpg" /> <img src="" data-lazy-src="http://detestdivisie.nl/upload/images/hover-tests/inside/bmw-inside-2.jpg" /> <img src="" data-lazy-src="http://detestdivisie.nl/upload/images/hover-tests/inside/bmw-inside-3.jpg" /> <img src="" data-lazy-src="http://detestdivisie.nl/upload/images/hover-tests/inside/bmw-inside-4.jpg" /> <img src="" data-lazy-src="http://detestdivisie.nl/upload/images/hover-tests/inside/bmw-inside-5.jpg" /> </div> </div> <div class="productcontainer" data-product-id="1"> <img src="http://detestdivisie.nl/upload/images/hover-tests/outside/bmw-outside.jpg" class="mainproductimage" /> <div class="hoverimages"> <img src="" data-lazy-src="http://detestdivisie.nl/upload/images/hover-tests/outside/bmw-outside-1.jpg" /> <img src="" data-lazy-src="http://detestdivisie.nl/upload/images/hover-tests/outside/bmw-outside-2.jpg" /> <img src="" data-lazy-src="http://detestdivisie.nl/upload/images/hover-tests/outside/bmw-outside-3.jpg" /> <img src="" data-lazy-src="http://detestdivisie.nl/upload/images/hover-tests/outside/bmw-outside-4.jpg" /> <img src="" data-lazy-src="http://detestdivisie.nl/upload/images/hover-tests/outside/bmw-outside-5.jpg" /> </div> </div> </div> the javscript class responsible handling events looks this:
categoryproductimages = function () { this.classname = 'categoryproductimages'; this.version = '0.1.0'; this.mouseover = false; this.currentelement = null; this.currentcategoryid = 0; this.currentimagelist = []; this.currentimagekey = 0; /** * categoryproductimages.init() * * initializes class reponsible handling * mouse on , outs products. * * method call createobserver method. */ this.init = function () { console.log('called ' + this.classname + '.init()'); this.createobservers(); }; /** * categoryproductimages.createobservers() * * handle mouse on , out events. */ this.createobservers = function () { console.log('called ' + this.classname + '.createobservers()'); var thisobj = this; jquery('.productcontainer').hover( /** called when mouse of user moves on element. **/ function () { console.log('mouse on .productcontainer'); thisobj.mouseover = true; thisobj.currentelement = jquery(this); thisobj.currentcategoryid = thisobj.currentelement.data('category-id'); console.log('lets\'s work category id ' + thisobj.currentcategoryid); thisobj.currentelement.find('.hoverimages img').each(function() { thisobj.currentimagelist.push(jquery(this).data('lazy-src')); }); thisobj.iterate(); }, /** called immediatly after mouse of user leaves element **/ function () { console.log('mouse out .productcontainer'); thisobj.currentelement = null; thisobj.mouseover = false; thisobj.currentimagelist = new array(); thisobj.currentimagekey = 0 } ); }; this.iterate = function () { console.log('called ' + this.classname + '.iterate()'); if (this.mouseover && this.currentimagelist.length > 0) { console.log('will start iteration process'); this.currentelement.find('img.mainproductimage').prop('src', this.currentimagelist[0]); thisobj = this; settimeout(function () { console.log('first image shown, show next image.'); thisobj.nextimage(thisobj.currentcategoryid); }, 3000) } else { console.log('won\'t iterate, because mouse of user has left element, of there no images show.'); } }; this.nextimage = function (currentcategoryid) { console.log('called ' + this.classname + '.nextimage()'); if (this.mouseover && this.currentimagelist.length > 0 && currentcategoryid == this.currentcategoryid) { console.log('mouseover still active, , images found, show next image.'); this.currentimagekey += 1; if (typeof this.currentimagelist[this.currentimagekey] == 'undefined') { console.log('oh no! we\'ve reached end of list. letst start on again.'); this.currentimagekey = 0; } this.currentelement.find('img.mainproductimage').prop('src', this.currentimagelist[this.currentimagekey]); thisobj = this; settimeout(function () { console.log('okay, we\'ve waited 3 seconds, next! :)'); thisobj.nextimage(currentcategoryid) }, 3000); } else { console.log('iteration ' + currentcategoryid + ' stopped'); console.log('mouse over: '); console.log(this.mouseover); console.log('image list length: '); console.log(this.currentimagelist.length); console.log('nextimage category id: '); console.log(currentcategoryid); console.log('current category id:'); console.log(this.currentcategoryid); console.log('#########################'); } } }; var categoryproductimagesobject = new categoryproductimages(); categoryproductimagesobject.init(); the make more clear i've created codepen example. please mouse on product 1 , product 2 fast , leave mouse on product 1. you'll see loop through product images way fast.
http://codepen.io/wdivo/pen/lamsq
the time should take before , image replaced 1 3 seconds. overlooking something, because several settimeouts working near eachother, while there should 1 active settimeout.
what should make sure 1 "active" settimeout running?
simply said, i'd want stop previous settimeouts if new 1 gets activated.
i'm looking clearinterval, can't think of way implement it...
Comments
Post a Comment