We Keep Coding

How to call a setInterval function

Instead of setInterval running upon refresh, I'd like it to run upon clicking on the start button & go up to time. I tried almost every variation for the past hours & it didn't work without any errors.
Instead the timer stops which makes sense if time > 2. Therefore, I am not sure how I can make timer restart once start gets click and for the timer to stop once time reached (i.e. 2 seconds)
HTML
<script src='https://api.chipware.co.za/js/flipclock-min.js'></script><script src="./script.js"></script>
<button style="width:200px; height: 50px;" id="start">Start</button>
<button style="width:200px; height: 50px;"onclick="submit()" id="stop">Submit</button>
JS
let time = 2;
var clock = $('.clock').FlipClock(0, {
clockFace: 'HourlyCounter',
countdown: false });
function submit(){
clock.stop();
}
var element_ = document.getElementById("start");
element_.addEventListener('click', function(){
start(time);
});
function start(time){
countup = setInterval(function () {
if(clock.getTime().time > time) {
clock.stop();
clearInterval(countup);
}
else{
var element = document.getElementById("stop");
element.addEventListener('click', function(){
submit();
});
}
})};
Also unsure why this code runs w/o error by itself but in chrome extension, it gives:
Uncaught TypeError: $(...).FlipClock is not a function

Your missing flipclock library I just added and update the code now it work.
let time = 2;
var clock = $('.clock').FlipClock(0, {
clockFace: 'HourlyCounter',
countdown: false });
function submit(){
clock.stop();
}
var element_ = document.getElementById("start");
element_.addEventListener('click', function(){
start(time);
});
function start(time){
countup = setInterval(function () {
console.log(clock.getTime().time ,time)
if(clock.getTime().time > time) {
clock.stop();
clearInterval(countup);
}
else{
var element = document.getElementById("stop");
element.addEventListener('click', function(){
submit();
});
}
})};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.7/flipclock.min.js" integrity="sha512-Vy4ftjkcjamOFPNSK7Osn8kYhF7XDcLWPiRvSmdimNscisyC8MkhDlAHSt+psegxRzd/q6wUC/VFhQZ6P2hBOw==" crossorigin="anonymous"></script>
<button style="width:200px; height: 50px;" id="start">Start</button>
<button style="width:200px; height: 50px;"onclick="submit()" id="stop">Submit</button>

disable javascript running on pressing the button

I am using javascript for page refresh.
put a new button and
I want this refresh canceled when I press the button.
how can I do it.
<script type="text/javascript">
function waitfor() {
window.location.reload();
}
setInterval("waitfor()", 10000);
</script>

the setInterval function returns an ID, you can clear the interval using that ID:
<script type="text/javascript">
function waitfor() {
window.location.reload();
}
var intervalID = setInterval("waitfor()", 10000);
var btn = document.getElementById("myButton");
btn.addEventListener("click", function() {
clearInterval(intervalID);
});
</script>

get the button and make event listener when making click on the button the function will run
this function will use clearInterval() function to stop setInterval
<script type="text/javascript">
document.getElementById("stop").addEventListener("click", stopInterval);
function waitfor() {
window.location.reload();
}
var timer = setInterval(waitfor, 2000);
function stopInterval() {
// To cancel an interval, pass the timer to clearInterval()
clearInterval(timer);
}

$(document).ready(function () {
$("button").click(function () {
$("td").remove();
const panorama = new google.maps.StreetViewPanorama(
document.getElementById("map2"),
{
position: { lat: <%#Eval("Latitude").ToString().Replace(",",".") %> , lng: <%#Eval("Longtitude").ToString().Replace(",",".") %> },
addressControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER,
},
linksControl: true,
panControl: true,
enableCloseButton: true,
}
);
});
});

jQuery setIntervel until condition is true

After the page is loaded i like to check a condition after every 1 second until it becomes true, and then terminate that function. I tried the following script that simple putting heavy load on the page start.
$(document).ready(function () {
setInterval(function () {
for (var i = 0; i < 1; ) {
if ($(".showPrice").length) {
console.log("yes");
i = 1;
} else {
return false;
}
}
}, 1000);
});

to be able to clear the interval you need a reference to the interval and pass it to clearInterval(), just assign it to a variable:
$(document).ready(function () {
let interval = setInterval(function () {
if ($(".showPrice").length) {
clearInterval(interval);
console.log('Cleared!');
}
}, 1000);
setTimeout(function(){
$('.placeholder').html('<div class="showPrice">11.00 $</div>');
}, 3000)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="placeholder"></div>
</body>

make realtime timer using flipclock

I want to make realtime timer using flipclock. I have code for that but not working properly. In Timer when start button click timer will be started in all tabs of chrome(realtime) and when stop button click timer will be stopped in all tabs. In page refresh if timer already started then started and if stopped then stopped.
Code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
<script>
var socket = io.connect('//' + location.host + ':7878');
// var autostart;
var clock;
$(document).ready(function() {
clock = $('.clock').FlipClock(localStorage.getItem("timer") ? localStorage.getItem("timer") : 0, {
clockFaceOptions: {
autoStart: false
},
onStart: function() {
// autostart = true;
socket.emit('socket_timer', clock.getFaceValue());
},
onStop: function() {
// autostart = false;
},
onInterval: function () {
console.log(clock.getFaceValue());
localStorage.setItem("timer", clock.getFaceValue());
// socket.emit('socket_timer', clock.getFaceValue());
}
});
socket.on('server_socket_timer',function(data) {
clock.setFaceValue(data);
clock.start();
});
socket.on('server_clock_stop', function () {
clock.stop();
});
$('#start').click(function () {
clock.start();
});
$('#end').click(function () {
clock.stop();
socket.emit('clock_stop');
});
});
</script>
Please help me.
Thanks in advance!

Adding and removing classes produces race condition when used within setTimeout

Have 2 objects on one, need to make both of them getting classes:
<script>
$(document).ready(function(){
var delayMillis = 200;
$('#overtop').hover(function(){ $('#honemove').addClass('hover');}, function () { setTimeout(function() { $('#honemove').removeClass('hover'); }, delayMillis); });
$('#overtop').hover(function(){ setTimeout(function() { $('#htwomove').addClass('hover'); }, delayMillis); }, function () { $('#htwomove').removeClass('hover'); });
});
</script>
<div id="overtop" class="overlay"></div>
<h1 id="honemove" class="h1a"><span>TITLE OF THE TITLE</span></h1>
<h2 id="htwomove"><span>INFO BELLOW TITLE</span></h2>
It works currently, but it glitches if u do a lot of mouse hovers, the CSS part is fine, I guess it doesn't like having two separate scripts on one action.

Use clearTimeout to prevent any sort of race condition from occurring:
$(document).ready(function() {
var $overtop = $('#overtop')
var $honemove = $('#honemove')
var $htwomove = $('#htwomove')
var delay = 200
var token
$overtop.hover(function() {
clearTimeout(token)
$honemove.addClass('hover')
token = setTimeout(function() {
$htwomove.addClass('hover')
}, delay)
}, function() {
clearTimeout(token)
$htwomove.removeClass('hover')
token = setTimeout(function() {
$honemove.removeClass('hover')
}, delay)
})
});
.hover {
color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="overtop" class="overlay">Overlay</div>
<h1 id="honemove" class="h1a"><span>TITLE OF THE TITLE</span></h1>
<h2 id="htwomove"><span>INFO BELLOW TITLE</span></h2>