Title: Race condition in javascript
Last modified: August 20, 2016
---
# Race condition in javascript
* Resolved [freerange](https://wordpress.org/support/users/freerange/)
* (@freerange)
* [13 years, 3 months ago](https://wordpress.org/support/topic/race-condition-in-javascript/)
* There is a race condition in your javascript:
* If an image has no size attributes and is not in cache your codes sees it as
0 x 0 and adds a pin button. However if the image is in cache and the browser
knows it’s actual size you correctly detect it as too small and don’t add the
button.
* The net result of this is you are adding pin buttons to other buttons if the
user has a cold cache.
* The fix for this would be to add buttons in 2 stages: If you know the size go
ahead but for any image that comes back 0 x 0 use onload() to trigger your code
so that you only run when the browser actually knows how big the image is.
* John
* [http://wordpress.org/extend/plugins/cb-pinterest-image-pinner/](http://wordpress.org/extend/plugins/cb-pinterest-image-pinner/)
Viewing 2 replies - 1 through 2 (of 2 total)
* Thread Starter [freerange](https://wordpress.org/support/users/freerange/)
* (@freerange)
* [13 years, 3 months ago](https://wordpress.org/support/topic/race-condition-in-javascript/#post-3506891)
* Here is a fix that hides the button if the image size is 0 and check again on
load to display the actual image.
* ```
CB_Pinterest_Pinner = function(selector, not_selector, min_width, min_height){
function init(selector, not_selector, min_width, min_height) {
jQuery(selector).not(not_selector).each(function(index) {
var extra_css = new Array("margin", "margin-top", "margin-bottom", "margin-left", "margin-right", "padding", "padding-top", "padding-bottom", "padding-left", "padding-right");
var already_selected = jQuery(this).attr("cb_pinned");
if(already_selected != "true") {
jQuery(this).attr("cb_pinned", "true");
var height = jQuery(this).height();
if( typeof height === "undefined") {
height = jQuery(this).attr("height");
}
var width = jQuery(this).width();
if( typeof width === "undefined") {
width = jQuery(this).attr("width");
}
width = parseInt(width);
height = parseInt(height);
min_width = parseInt(min_width);
min_height = parseInt(min_height);
if((height == 0 || height > min_height) && (width == 0 || width > min_width)) {
var theID = 'pin_images_' + index;
jQuery(this).wrap('');
jQuery('#' + theID).append(' ');
jQuery('#' + theID + " a").click(image_click);
if(height > 0) {
jQuery('#' + theID).height(height);
}
if(width > 0) {
jQuery('#' + theID).width(width);
}
var len = extra_css.length;
for(var i = 0; i < len; i++) {
var css_attr_name = extra_css[i];
var css_attr_value = jQuery(this).css(css_attr_name);
if(!( typeof css_attr_value === "undefined")) {
jQuery('#' + theID).css(css_attr_name,css_attr_value);
}
}
jQuery('#' + theID).addClass(jQuery(this).attr("class"));
if(height == 0 || width == 0) {
jQuery('#' + theID+' a.cb_pin_link').hide(); //If we don't know the image size hide the button for now
jQuery(this).load(function() {
//Image now loaded, see if it's big enough
if(jQuery(this).height() > min_height && jQuery(this).width() > min_width) {
jQuery(this).parent().find('.cb_pin_link').show();
}
})
}
}
}
});
}
function image_click(event) {
var url = document.URL;
/* TODO add somehow to determine if this is a link to a post or not.
* This works for the most part but not completely
* $link_parents =jQuery(this).parent().parent("a");
alert($link_parents.length);
if($link_parents && $link_parents.length == 1 ){
//alert(typeof $link_parents.get(0));
url = $link_parents.attr("href");
}*/
if(url.charAt(url.length - 1) == "/") {
url = url.substring(0, url.length - 1);
}
url = encodeURIComponent(url);
var media = jQuery(this).prev("img").attr("src");
media = encodeURIComponent(media);
var description = jQuery(this).attr("title");
if( typeof description === "undefined" || jQuery.trim(description) == "" ) {
description = jQuery(this).prev("img").attr("alt");
if( typeof description === "undefined" || jQuery.trim(description) == "" ){
description = document.title;
}
}
var href = 'http://pinterest.com/pin/create/button/?url=' + url + '&media=' + media + '&description=' + description;
event.preventDefault();
pin_this(href);
}
function pin_this(href) {
window.open(href, "cb_pin_windows", "menubar=1,resizable=1,width=800,height=250");
}
init(selector, not_selector, min_width, min_height);
}
```
* Plugin Contributor [chriswhittle](https://wordpress.org/support/users/chriswhittle/)
* (@chriswhittle)
* [13 years, 3 months ago](https://wordpress.org/support/topic/race-condition-in-javascript/#post-3506913)
* thanks will get it incorporated in my next build
Viewing 2 replies - 1 through 2 (of 2 total)
The topic ‘Race condition in javascript’ is closed to new replies.
* 
* [Pinterest Image Pinner From Collective Bias](https://wordpress.org/plugins/cb-pinterest-image-pinner/)
* [Frequently Asked Questions](https://wordpress.org/plugins/cb-pinterest-image-pinner/#faq)
* [Support Threads](https://wordpress.org/support/plugin/cb-pinterest-image-pinner/)
* [Active Topics](https://wordpress.org/support/plugin/cb-pinterest-image-pinner/active/)
* [Unresolved Topics](https://wordpress.org/support/plugin/cb-pinterest-image-pinner/unresolved/)
* [Reviews](https://wordpress.org/support/plugin/cb-pinterest-image-pinner/reviews/)
* 2 replies
* 2 participants
* Last reply from: [chriswhittle](https://wordpress.org/support/users/chriswhittle/)
* Last activity: [13 years, 3 months ago](https://wordpress.org/support/topic/race-condition-in-javascript/#post-3506913)
* Status: resolved