Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Have a broad algorithmic question regarding the Flow of Logic using setTimeout() and Events .onclick() in JavaScript.
Basic Procedure:
When a button is clicked 2 times within 3 seconds, a HTML element
(currently visible) dissapears, following this, when the same button
is pressed the image reappears and the process repeats
What would be the best way to come about this problem? Outline of code is appreciated.
Have been working on this for several hours now, my code written is logically incorrect and would not be much good use.
I hope this could help:
http://jsfiddle.net/kqzdn8xe/
$(document).ready(function(){
$('#button1').click(function(){
if (typeof(this.visibleFlag) == 'undefined') {
this.visibleFlag = true;
}
var thisTimeClick = Date.now();
if (this.prevClick && (thisTimeClick - this.prevClick < 3000) && this.visibleFlag) {
this.visibleFlag = false;
$('#div1').hide();
} else if (!this.visibleFlag) {
this.visibleFlag = true;
$('#div1').show();
}
this.prevClick = thisTimeClick;
});
});
I believe you are after something like this;
I have also included logic to ignore the case of a 3rd successive click (within 500ms of the 2nd one), as I assume you are after double click like behavior.
It would be worth also looking at the jQuery double click event: https://api.jquery.com/dblclick/
<button id="buttonExample">Click me</button>
<br/>
<div id="imageContainer">Image</div>
<script type="text/javascript">
$('#buttonExample').click(function(){
var timeNow = new Date().getTime();
var lastClicked = parseInt($('#buttonExample').data("lastClicked")||0);
var ms = timeNow - lastClicked;
if($("#imageContainer").is(":visible")) {
if(ms < 3000) {
$("#imageContainer").hide();
}
$('#buttonExample').data("lastClicked", timeNow);
}else if(ms > 500){
$("#imageContainer").show();
}
});
</script>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 months ago.
Improve this question
I want to create a code that loops over an array and prints its index. I have created buttons to Stop (to stop the loop) & Start (to start the loop) the loop.
I have tried to achieve this by creating a condition that checks over a variable stop, If its value is 1 the look should stop, however, this condition doesn't work.
you can use recursive method and settimeout to set loop time (if needed)
let isStatus = false;
let index = 0;
function myLoop(){
console.log(index++)
setTimeout(function() {
if(isStatus) {
myLoop()
}
}, 800)
}
function start(){
index = 0
isStatus = true;
myLoop()
}
function pause(){
isStatus = false;
}
function resume(){
isStatus = true;
myLoop()
}
<button onClick="start()">start</button>
<button onClick="pause()">pause/stop</button>
<button onClick="resume()">resume</button>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
Please consider the following example.
var secondsCount = 0;
if( secondsCount <= 1800 )
{
setInterval(function(){
secondsCount++;
console.log( secondsCount )
}, 1000);
}
If we run the above code nearly to 1800 seconds ( 30 mins ) we could see that secondsCount value & actual seconds ( or minutes ) lapsed are not equal.
Try this...
var secondsCount = 0;
var x = setInterval(function() {
secondsCount++;
console.log(secondsCount);
if (secondsCount >= 1800) {
clearInterval(x);
}
}, 1000);
Note that, setInterval and setTimeout are forced to use at least the minimum delay. See Reasons for delays longer than specified. In practice, there's no guarantee that your callback will be called in the "exact" set amount of time.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I'm sure this is a very simple solution. I have made this javacript function that tests whether there is a certain css style on a div and then moves around another div. However, it does not work and I have no idea why.
JavaScript:
function sale() {
var style = document.getElementsByClassName("product-single__price--wrapper").getAttribute("style");
if (style !="display: none;") {
document.getElementByClassName("product-single__description").style.marginTop = "70px !important";
}
}
window.onload = sale;
I wouldn't ever suggest doing this, but if you want to call that function all the time, you need to put it into a setInterval with the milliseconds you want it to get called.
Example:
$(document).ready(function() {
setInterval(function() {
sale();
}, 1000);
});
OR
$(document).ready(function() {
setInterval(sale, 1000);
});
This will get called every second. Again, horrible horrible horrible practice. But, this will do what you want. If you want it called sooner, then change the milliseconds accordingly (1000 milliseconds = 1 second).
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am a JavaScript newbie, I am trying to build a simple countdown timer that counts down only in seconds. It is showing uncaught type error for x. Which what I think means that the function is not recursing. The code is as below:
function timer(x, elem){
var elem = document.getElementById(elem);
elem.innerHTML = x;
if (x > 0) {
setTimeout(timer(x-1, elem),1000);
}
}
You have two issues:
You are overwriting the value of elem to be a DOM element, and then trying to reuse it as if it were still a string
setTimeout expects a function that it can call every 1000 ms. Instead you are calling a function and passing the result to setTimeout. The distinction is a little confusing, but it may help to see it separated out into another variable:
This is what you are currently doing
var myFuncResult = timer(x-1, elem); // this returns the result of the function
setTimeOut(myFuncResult, 1000);
Instead you want
var myFunc = function() { timer(x-1, elem) }; // this returns a function that can be called
setTimeOut(myFunc, 1000);
Of course you can put the function directly into setTimeout, like you attempted to do.
The following does what you want (Hit "Run"):
function timer(x, elem){
var DOMelem = document.getElementById(elem);
DOMelem.innerHTML = x;
if (x > 0) {
setTimeout(function() {
timer(x-1, elem)
},1000);
}
}
timer(10, "my-timer");
<div id="my-timer"></div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm trying to implement an effect similar to this Hacker Typer site in AngularJS. I've based some of what I've got so far on the responses in this thread but instead of using a timer I'm just counting up based on ng-keyup.
As it is now, each individual ng-keyup reveals a single character. But I'd like it to reveal three at once.
This is the approach I tried, but it seems to only reveal every third character. Any suggestions?
HTML
<div ng-controller="WriterCtrl" ng-keyup="ghostWriter()">
<pre>KeyUps: {{count}}</pre>
<p>{{typewritten}}</p>
</div>
JS
app.controller('WriterCtrl', ['$scope',
function($scope) {
var content = 'Mary Ann! Mary Ann! said the voice.';
$scope.count = 0;
$scope.typewritten = '';
$scope.ghostWriter = function() {
if ($scope.count < content.length) {
$scope.typewritten = $scope.typewritten + content[$scope.count];
$scope.count +=2;
}
};
}
]);
I think this does what you're looking for
http://plnkr.co/edit/QFPCP8aMKRyCsOuwNkcH?p=preview
//Content to be ghost written
var content = "a whole load of content to be ghost written";
//Content already ghost written
$scope.typewritten = '';
//The ghost writer!
$scope.ghostWriter = function() {
//If there is still content left to write
if ($scope.typewritten.length < content.length) {
//Write up to three characters from the remaining content
$scope.typewritten += content.substr($scope.typewritten.length, 3);
} else {
window.alert('Writing time is over.');
}
};