Develop Reference

Jquery - hasclass after delay

I want to check if an element has a class after some time. Like delay. Basically the class is being added to the element by some other function. So If I check the hasClass on that clicked element it returns false.
var check_selected = $(this).hasClass('selected');
if ( $(this).hasClass('selected').delay(500) ) {
console.log(check_selected);
}
This is what I am trying but I want to know if we can add delay to hasClass, or any other way to achieve this. But it is not working
As per answers suggested I tried this -
var check_selected = $(this).hasClass('selected');
setTimeout(function(){
if ( $(this).hasClass('selected') ) {
console.log(check_selected);
}
}, 500);
But no outcome now in console.
Just to update -
The class is being applied on click, and the same click I basically wants to know if the class is applied, so I am using hasclass. Is there any other way out, or am I doing it wrong
EDIT -
var _this = this;
var check_selected = $(this).hasClass('selected');
setTimeout(function(){
if ( $(_this).hasClass('selected') ) {
console.log(check_selected);
}
}, 5000);
I am trying this but still getting false
UPDATE -
var checkSelected = setInterval(function(){
var check_selected = $(_this).hasClass('selected');
if(check_selected) {
clearInterval(checkSelected);
}
console.log(check_selected);
}, 500);
This worked!!

Try setTimeout for simulating the delay. And if you want to test this repeatedly until you get it selected you can try setInterval(function(){}, interval). You need to call clearInterval if you want to stop calling the function.
$("#test").on("click", function(){
const component = $(this);
setTimeout(function(){
component.addClass("selected");
}, 600);
setTimeout(function(){
var check_selected = component.hasClass('selected');
console.log(check_selected);
}, 500);
var checkSelected = setInterval(function(){
var check_selected = component.hasClass('selected');
if(check_selected) {
clearInterval(checkSelected);
}
console.log(check_selected);
}, 500);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">Check my class</div>

you can use setTimeout its javascript function that does callback execution after the miliseconds passed in as second parameter
var check_selected = $(this).hasClass('selected');
setTimeout(function(){
if ( $(this).hasClass('selected') ) {
console.log(check_selected);
}
}, 500);

You can use timer function
var currObj = this;
setTimeout(function(){
var check_selected = $(currObj ).hasClass('selected');
if ($(currObj).hasClass('selected')) {
console.log(check_selected);
}
},500);

React onClick not working to start a timer

I know there have been a few of these questions posted but I haven't been able to find an answer to work. My code is below. Everything links, and I was able to get a more simple timer working that just starts timing when the component mounts, but now I want to make it more interactive. however, when I click the button nothing happens. What I am trying to do is have a component that is a button, when clicked it becomes a timer and displays the amount of time passed since clicked. But clicking the button doesn't do any thing.
thanks for the help!
var StartButton = React.createClass({
getInitialState:function(){
return { elapsed: 0, go: false };
},
getDefaultProps: function() {
return {
interval: 1000
};
},
componentDidMount: function(){
console.log('mounted');
},
tick: function(){
console.log('tick')
this.setState({elapsed: new Date() - this.state.start});
},
startCount: function(e){
console.log(e);
console.log('GO!!!')
this.state.props = Date.now;
this.state.go = true;
this.timer = setInterval(this.tick, this.props.interval);
},
render: function(){
var self = this;
var elapsed = Math.round(this.state.elapsed / 100);
var seconds = (elapsed / 10).toFixed(3);
var clickMe = <button onCLick={self.startCount} >GO</button>;
var display = <div>time elapsed {this.state.elapsed}</div>
return (
<div>
{this.state.go ? display : clickMe}
</div>
)
}
})
var AppContainer = React.createClass({
render: function(){
return (<div><StartButton interval={1000} /></div>);
}
})
$(document).ready(function () {
console.log('in ready');
ReactDOM.render(<AppContainer></AppContainer>, document.getElementById('jake'));
});

Not sure if you found all the small errors by now, but in case you haven't, here's a working copy of your component;
var StartButton = React.createClass({
getInitialState:function(){
return { elapsed: 0, go: false };
},
getDefaultProps: function() {
return {
interval: 1000
};
},
componentDidMount: function(){
console.log('mounted');
},
tick: function(){
console.log('tick')
this.setState({elapsed: Date.now() - this.state.start});
},
startCount: function(e){
console.log(e);
console.log('GO!!!')
this.setState({start: Date.now(), go: true})
setInterval(this.tick, this.props.interval);
},
render: function(){
var clickMe = <button onClick={this.startCount} >GO</button>;
var display = <div>time elapsed {Math.round(this.state.elapsed / 1000)} seconds</div>
return (
<div>
{this.state.go ? display : clickMe}
</div>
)
}
})

I think you problem is here with onClick:
var clickMe = <button onClick={self.startCount} >GO</button>;

Preventing Jquery .click toggle function from running over and over with excess clicking

Im building a .clicktoggle function in jQuery and for the life of me i can't get a .stop like effect on it, basically i don't want it to play over and over if mash clicked.
I want it to be applied the the function so its self contained, that's where im stuck.
JS fiddle link
(function($) {
$.fn.clickToggle = function(func1, func2) {
var funcs = [func1, func2];
this.data('toggleclicked', 0);
this.click(function() {
var data = $(this).data();
var tc = data.toggleclicked;
$.proxy(funcs[tc], this)();
data.toggleclicked = (tc + 1) % 2;
});
return this;
};
}(jQuery));
$('div').clickToggle(function() {
$('.testsubject').fadeOut(500);
}, function() {
$('.testsubject').fadeIn(500);
});
<div class="clickme">click me fast</div>
<div class="testsubject">how do i stop it playing over and over if you click alot</div>
Toggle .click seems like something alot of people would use so i thought it might be useful to ask it here

By adding a check to a boolean variable fadeInProgress, you can choose to only queue the animation if fadeInProgress is false. It then sets the value to true and executes the animation. When the animation is completed, set the value to false.
var fadeInProgress = false;
$('div').clickToggle(function() {
if (!fadeInProgress) {
fadeInProgress = true;
$('.testsubject').fadeOut(700, function(){fadeInProgress = false;});
}
}, function() {
if (!fadeInProgress) {
fadeInProgress = true;
$('.testsubject').fadeIn(700, function(){fadeInProgress = false;});
}
});

var clicked = false;
var doing = false;
$(".clickme").click(function(e) {
if (doing) {
return;
} else {
doing = true;
}
doing = true;
clicked = !clicked;
if (clicked) {
$('.testsubject').fadeOut(700, function() {
doing = false
});
} else {
$('.testsubject').fadeIn(700, function() {
doing = false;
});
}
});
This example is a simple toggle which only allows you to click when it is not doing anything. I explained on IRC, but as an example here, the function only runs when doing is set to false, which only happens when it's set after fadeIn() or fadeOut's callback function thingymajigger.

how to use one component render many html fragment in reactjs?

I have a button there, when I click this button, i want render a div and append it to body.
and when I click this button again, a new div be rendered.
I want: How many times I click the button, how many div be render.
The follow code can only render one div: ( jsFiddle: http://jsfiddle.net/pw4yq/ )
var $tool = document.getElementById('tool');
var $main = document.getElementById('main');
var partBox = React.createClass({displayName: 'partBox',
render: function(){
return (
React.DOM.div({className:"box"}, "HELLO! ", this.props.ts)
)
}
});
var createBoxBtn = React.createClass({displayName: 'createBoxBtn',
createBox: function(){
var timeStamp = new Date().getTime();
React.renderComponent(partBox( {ts:timeStamp} ), $main);
},
render: function(){
return (
React.DOM.button( {onClick:this.createBox}, "createBox")
)
}
});
React.renderComponent(createBoxBtn(null ), $tool);

Your app should be data driven, meaning the state of your app is kept outside the DOM. In your example, you are essentially keeping a list of Date objects. Put that into a state that you can modify, and render a box for each Date object you have created:
Working JSFiddle: http://jsfiddle.net/pw4yq/6/
var $main = document.getElementById('main');
var partBox = React.createClass({displayName: 'partBox',
render: function(){
return (
React.DOM.div({className:"box"}, "HELLO! ", this.props.ts)
)
}
});
var createBoxBtn = React.createClass({displayName: 'createBoxBtn',
createBox: function(){
var timeStamp = new Date().getTime();
this.props.onClick({ts: timeStamp});
},
render: function(){
return (
React.DOM.button({onClick: this.createBox}, "createBox")
)
}
});
var app = React.createClass({
displayName: "app",
getInitialState: function() {
return {
partBoxes: []
};
},
createBox: function(partBox) {
this.state.partBoxes.push(partBox);
this.forceUpdate();
},
render: function() {
return (
React.DOM.div(null,
createBoxBtn({onClick: this.createBox}),
this.state.partBoxes.map(function(pb) {
return partBox({key: pb.ts, ts: pb.ts});
})
)
);
}
});
React.renderComponent(app(null), $main);

While Mouse press event. Prototype JS or Javascript

I would like to know if someone knows how to make a function repeat over and over while the mouse is press, I don't know how to make it work. I know in prototype you can take events like
$('id').observe("click",function(event){})
$('id').observe("leave",function(event){})
$('id').observe("change",function(event){})
//etc...
but is something like $('id').observe("whilemousepress",function(event){}) :P
//I know there is not any event in Javascript but I would like to emulate.

I can't comment on the prototype specifics, but you could probably do this by creating an interval using setInterval() that is started on mousedown and is stopped using .clearInterval() on mouseup.

There is an event for when the mouse is down mousedown and one for when the mouse is up mouseup. Just start your events when the mouse is pressed and stop them when the button is released.
$('id').observe("mousedown",function(event){
// Do whatever you want
})
$('id').observe("mouseup",function(event){
// Stop the events starts when the mouse when down
})

ok... I guess both are correct what I did is :
$('right').observe('mousedown',function(event){ intervalRigth = setInterval(this.name + ".dosomething()",50); }.bind(this));
$('left').observe('mousedown',function(event){ intervalLeft = setInterval(this.name + ".dosomething()",50); }.bind(this));
$('right').observe('mouseup',function(event){ clearInterval(intervalRigth ); }.bind(this));
$('left').observe('mouseup',function(event){ clearInterval(intervalLeft ); }.bind(this));
//so I guess a mix of both answer are right thanks =)

var MouseUtils = (function() {
'use strict';
// VARIABLES
var _isScrolling = false;
var _buttonsArray = [false, false, false, false, false, false, false, false, false]; // 0 left, 2 right, 1 middle, other.. extra buttons, gaming mouses
var _mousePressed = false;
//EVENT LISTENERS
var _init = function(w, d) {
w.onscroll = function() {
_isScrolling = true;
};
d.onmousedown = function(e) {
_buttonsArray[e.button] = true;
_mousePressed = true;
};
d.onmouseup = function(e) {
_buttonsArray[e.button] = false;
_mousePressed = false;
};
d.oncontextmenu = function() { // this is mandatory for clicks down|ups works well
return false;
};
return this;
};
// TIMERS
var _scrollInterval = setInterval(function() {
if(_isScrolling) {
_isScrolling = false;
}
}, 500);
// EXPOSED
var _isLeftPressed = function() {
return _buttonsArray[0];
};
var _isRightPressed = function() {
return _buttonsArray[2];
};
var _isMiddlePressed = function() {
return _buttonsArray[1];
};
var _isScrolling = function() {
return _isScrolling;
};
var _clearScrollInterval = function() {
clearInterval(_scrollInterval);
};
return {
init: _init,
isLeftPressed: _isLeftPressed,
isRightPressed: _isRightPressed,
isMiddlePressed: _isMiddlePressed,
isScrolling: _isScrolling,
clearScrollInterval: _clearScrollInterval
};
})();
MouseUtils.init(window, document);
while(MouseUtils.isLeftPressed) {
// DO SOMETHING
}