Develop Reference

How to create a loop in an interval function (the right way)

I have been trying to replicate an example of a rotating text, but I wanted to make it infinite. However, I get it just once and I think it might be related with this logic:
Original link:
https://codepen.io/galefacekillah/pen/jWVdwQ
My first attempt, applying the recursion, was based on one example in the Mozilla docs:
let nIntervId;
function checkIntervalFinish() {
if (!nIntervId) {
nIntervId = setInterval(RotateText, 4000);
}
}
function RotateText() {
var visibleWord = document.getElementsByClassName('visible')[0],
nextWord = visibleWord.nextSibling;
if (nextWord.nodeType == 3) nextWord = nextWord.nextSibling;
if (!(nextWord == null)) {
visibleWord.setAttribute('class', 'hidden');
nextWord.setAttribute('class', 'visible');
} else {
clearInterval(nIntervId);
nIntervId = null;
}
}
checkIntervalFinish();
My second attempt was using a setTimeup. I also tried changing directly the setTimeup for the setInterval, but it didn't work. If I put a console.log, the interval function is executed infinitely, however, not this function. Although this works, it just executes once as well.
var test = function () {
// MY FUNCTION
var intervalID = setInterval(function () {
var visibleWord = document.getElementsByClassName('visible')[0],
nextWord = visibleWord.nextSibling;
if (nextWord.nodeType == 3) nextWord = nextWord.nextSibling;
if (!(nextWord == null)) {
visibleWord.setAttribute('class', 'hidden');
nextWord.setAttribute('class', 'visible');
} else {
clearInterval(intervalID);
}
}, 4000)
// END
setTimeout(test, 100);
};
test();
Can someone explain to me what is it that I am doing wrong? Some why, I think it is related to the null validation.

this.interval is undefined inside a class function [duplicate]

This question already has answers here:
"this" keyword in event methods when using JavaScript prototype object
(4 answers)
Closed 3 years ago.
in summarize I want to blink an object material in BJS, so I create two functions blink() and stopBlink():
function blink(obj, delay, box) {
var changeMaterial = function(obj, newMaterial) {
{
obj.material = newMaterial;
}
};
oldMaterial = obj.material;
interval = (function() {
var Toggle = true;
return setInterval(function() {
if (Toggle) changeMaterial(obj, box);
else {
changeMaterial(obj, OriginalStairMaterial);
}
Toggle = !Toggle;
}, delay);
})();
}
function stopBlink(obj, duration) {
setTimeout(function() {
obj.material = oldMaterial;
clearInterval(interval);
}, duration);
}
So I called my function inside JQuery Ready function :
$(document).ready(function() {
$("#btn1").click(function() {
if(Toggle1)
blink(stairMesh,100,boxMaterial[0]);
else
stopBlink(stairMesh,500);
Toggle1=!Toggle1;
}
);
until now everything works good :), I decided to creat a class and implement my functions inside it (because I want to use polymorphism to redefine blink() and stopBlink() functions).
class A {
blink() {}
stopBlink() {}
}
class B extends A {
constructor(oldMaterial) {
super();
this.oldMaterial = oldMaterial;
this.interval = null;
}
blink(obj, delay, box, duration) {
var changeMaterial = function(obj, newMaterial) {
{
obj.material = newMaterial;
}
};
//var oldMaterial=obj.material;
this.interval = (function() {
var Toggle = true;
return setInterval(
function() {
if (Toggle) changeMaterial(obj, box);
else {
changeMaterial(obj, OriginalStairMaterial);
}
Toggle = !Toggle;
},
delay
);
})();
console.log(this.interval);
}
stopBlink(obj, duration) {
setTimeout(function() {
obj.material = oldMaterial;
console.log(this.interval);
clearInterval(this.interval);
}, duration);
}
}
and I create a new object inside ready function:
$(document).ready(function() {
var a = new B();
$("#btn1").click(function() {
if(Toggle1)
a.blink(stairMesh,100,boxMaterial[0]);
else
a.stopBlink(stairMesh,500);
Toggle1=!Toggle1;
}
);
The problem is, when I click the button the blink() function works goos and my object blinks, but when I click again in order to stop blining it continues to blink!
I tried to console.log(this.interval) in blink(), it gives me a number (11), but when I console it in stopBlink() it is undefined!

Your click handlers are not being bound to the context of your class. An easy fix is to bind them inside your constructor. So, you're setting this.interval inside of blink but it only exists in the context of that function. By binding it to the class, this will refer to the context of the class, instead of the function context.
constructor(oldMaterial)
{
super();
this.oldMaterial=oldMaterial;
this.interval=null;
this.blink = this.blink.bind(this);
this.stopBlink = this.stopBlink.bind(this);
}

Why object property became undefined when using setInterval

As below code, I make an object named "test", and give it properties and method.
The property came from its argument.
And I try to call the method every 2 sec after onload, and the result shows undefined.
But if I only call the method not using setInterval(), like this
window.onload = function() {
giveword.showWord();
}
I'll be able to show the text "Hi".. Why is that?
var giveword = new test("Hi");
function test(word) {
this.word = word;
}
test.prototype.showWord = function() {
document.getElementById("msg_box").innerHTML = this.word;
}
window.onload = function() {
setInterval(giveword.showWord, 2000);
}
Thanks for help...

The reason is because in your test.prototype.showWord function your this object is referring to the context in which the function is called, which is the window object when called from setInterval.
I think what you want to do is use a closure to make the context of showWord() be the giveword instance like this:
var giveword = new test("Hi");
function test(word) {
this.word = word;
}
test.prototype.showWord = function() {
document.getElementById("msg_box").innerHTML = this.word;
}
window.onload = function(){
setInterval(function(){giveword.showWord();}, 2000); // <<-- here's the closure
}
The difference is that with the closure you're telling the setInterval function to call a function within the context as it was when the setInterval was declared. When setInterval was declared there was a variable in scope called giveword that had a method showWord() that returns the value of your initial input. (Closures are hard to explain, and I'm afraid you'd be best served by someone else explaining them if you need more info.)

This solution this now so easy, use an arrow function in setInterval. Here is an example using setInterval inside of an object method.
const mobile = {
make: 'iPhone',
model: 'X',
battery: 10,
charging: false,
charge: function() {
if(this.battery < 100) {
this.charging = true;
console.info('Battery is charging...');
let interval = setInterval(() => {
this.battery = this.battery + 10;
console.info(mobile.battery);
if( this.battery === 100){
this.charging = false;
clearInterval(interval);
console.info('Battery has finished charging.');
}
}, 100);
}
else {
console.info('Battery does not need charging.');
}
}
}

Trouble with setInterval in an object's method

I can't figure out why when I call the reset method of the object, the timer is still null. I simplified version of my object is below, followed by the jQuery that constructs a new object and runs the code. See UPPERCASE comments for my specific question points. Thanks!
var countdownTimer = {
// Default vars
milliseconds: 120000,
interval: 1000,
timer: false,
/* ... stuff ... */
countdown: function () {
var root = this;
var originalTime = root.milliseconds;
/* ... stuff */
// IN MY MIND THIS NEXT LINE SETS THE INSTANCE OF THIS OBJECT'S TIMER PROPERTY TO THE setIterval's ID. BUT DOESN'T SEEM TO BE CORRECT. WHY?
root.timer = setInterval(function () {
if (root.milliseconds < 1) {
clearInterval(root.timer); // THIS LINE SEEMS TO WORK
root.countdownComplete(); // callback function
return false;
}
root.milliseconds = root.milliseconds - root.interval;
/* .... stuff ... */
}, root.interval);
},
start: function (ms) {
if (ms) {
this.milliseconds = ms;
}
if(this.timer) {
clearInterval(this.timer); // NOT SURE IF THIS WORKS OR NOT
}
this.countdown();
},
reset: function (ms) {
var root = this;
if(root.timer) {
clearInterval(root.timer); // THIS DOES NOT WORK
} else {
console.log('timer not exist!!!!'); // ALWAYS END UP HERE. WHY?
}
/* .... stuff ... */
},
countdownComplete: function() { }
};
// Setting up click events to create instances of the countdownTimer
$(function () {
var thisPageCountdown = 4000;
$('[data-countdown]').on('click', '[data-countdown-start], [data-countdown-reset]', function () {
var $this = $(this);
var $wrap = $this.closest('[data-countdown]');
// create instance of countdownTimer
var myCountdown = Object.create(countdownTimer);
if ($this.is('[data-countdown-start]')) {
$this.hide();
$('[data-countdown-reset]', $wrap).css('display', 'block');
myCountdown.$wrap = $wrap;
myCountdown.start(thisPageCountdown);
// myCountdown.countdownComplete = function() {
// alert("Updated Callback!");
// };
}
if ($this.is('[data-countdown-reset')) {
$this.hide();
$('[data-countdown-start]', $wrap).css('display', 'block');
// RESET CALLED HERE BUT DOESN'T WORK RIGHT. SAYS myCountdown.timer IS STILL null. WHY?
myCountdown.reset(thisPageCountdown);
}
});
});

When you use var myCountdown = Object.create(countdownTimer); inside of your click function callback you are scoping it only to that callback and once the callback has executed it is garbage collected. You need to only create one instance of the countdownTimer, and it should be outside of your click event handler.
var thisPageCountdown = 4000;
// create instance of countdownTimer
var myCountdown = Object.create(countdownTimer);
$('[data-countdown]').on('click', '[data-countdown-start], [data-countdown-reset]', function () {
var $this = $(this);
var $wrap = $this.closest('[data-countdown]');

TL;DR You can fix your issue by avoiding use of the keyword this in static methods.
When you use the keyword this in a static javascript method, it refers to the item before the last dot from the call point. Example:
foo.bar(); // inside, this will refer to foo
foo.bar.foobar(); //inside, this will refer to foo.bar
var a = foo.bar.foobar();
a(); //this will refer to either null or window - oops
To prevent this behavior, you should always use the fully qualified name reference in static methods instead of relying on the this keyword.
Example from above:
reset: function (ms) {
//var root = this; // don't do this
if(countdownTimer.timer) {
clearInterval(countdownTimer.timer);
} else {
console.log('timer not exist!!!!');
}
/* .... stuff ... */
}

onchange javascript variable

Is there a way to call a JavaScript function if a javascript variable changes values using jQuery?
Something to the extend of -
var test = 1;
test = 2; // calls a javascript function
test = 3; // calls a javascript function
This way I wouldn't have to add an onchange event to so many different functions.

(Something seems a bit carelessly planned in your code if you need functionality like that)
The easiest way to add that feature is to create a function for updating your variable, that also calls whatever other function you want to.
Instead of:
var test = 1;
test = 2; // calls a javascript function
test = 3; // calls a javascript function
You do:
var test = 1;
function set_test(newval) {
test = newval;
my_callback(); // this is whatever you wanted to call onChange
}
set_test(2);
set_test(3);

try this, it's real variable change event:
var book = {
_year: 2004,
edition: 1
};
Object.defineProperty(book, "year", {
get: function(){
return this._year;
},
set: function(newValue){
this._year=newValue;
this.edition=newValue-2004;
alert(this._year);
alert(this.edition);
}
});
book.year=2017
// will alert 2017 and 13

No, there is not, just polling with setInterval or setTimeout or callbacks. Events only apply to DOM. I'd suggest that you try to go with callbacks and do things like this:
function foo(data, callback)
{
// do things with data
callback(data);
}
function bar(data)
{
console.log('callback can has', data);
}
foo('baz', bar);
It's a rough example, but should give you the idea.

One option is to wrap your data into a heavier object.
var Watching = function(){
var a;
this.getA(){
return a;
};
this.setA(value){
a = value;
this.trigger('watch');
};
his.watchA(callback){
this.bind('watch', callback);
};
};
var obj = new Watching();
obj.watchA(function(){ alert('changed'); });
obj.setA(2);

This doesn't answer your question exactly, but it may solve your problem:
make your variable as html content of an element, then use jQuery change() event
<script>
document.write("<div id='test'>"+test+"</div>";
$("#test").change(function(){//your script here});
</script>

You can create a class to be notified when your variable changed.
this is the class:
class ListeningVariable {
constructor(val, changeHandler) {
this.val = val;
this.changeHandler = changeHandler
}
set value(val) {
if (this.val !== val) {
this.changeHandler(val);
}
this.val = val;
}
changeHandler(val) {}
}
Then you can create an instance of this class instead of your variable:
let myVar = new ListeningVariable(25/*initialize*/, function(val) {
console.log("variable Changed to:", val);
}/*handler function*/);
And when you want to change your variable, just use this code:
myVar.value = 20; // calls the changeHandler function
myVar.value = 20; // does't call the changeHandler function
myVar.value = 40; // calls the changeHandler function

You can do something like this with setting intervals to keep track of change:
var dataToChange = 1;
var key = dataToChange;
var int = setInterval(() => {
if (dataToChange != key) {
console.log('changed'); /// if data changes
clearInterval(int);
} else {
console.log('nothing changed'); /// while nothing changes
}
}, 3000);
setTimeout(() => {
///// supposedly this is when the variable changes
dataToChange = 2;
}, 9000);

The below function will poll for changes in the test variable every 5 seconds:
// initialize test variable globally
var test = 1;
// global variable to store the previous value of test
// which is updated every 5 seconds
var tmp = test;
setInterval("pollForVariableChange()", 5000);
function pollForVariableChange() {
if (tmp != test) {
alert('Value of test has changed to ' + test);
}
tmp = test;
}