How to shorten a jQuery function? - javascript

I have this jQuery function that work. Every 2 lines is the same except a minor changes. How can I shorten it?
$(".c1").delay(5000).fadeOut("slow", function() {
$("#phone").addClass("c2").fadeIn("slow", function() {
$(".c2").delay(5000).fadeOut("slow", function() {
$("#phone").addClass("c3").fadeIn("slow", function() {
$(".c3").delay(5000).fadeOut("slow", function() {
$("#phone").addClass("c4").fadeIn("slow", function() {
$(".c4").delay(5000).fadeOut("slow", function() {
$("#phone").addClass("c5").fadeIn("slow", function() {
$(".c5").delay(5000).fadeOut("slow", function() {
$("#phone").addClass("c6").fadeIn("slow", function() {
$(".c6").delay(5000).fadeOut("slow", function() {
$("#phone").addClass("c7").fadeIn("slow", function() {
$(".c7").delay(5000).fadeOut("slow", function() {
$("#phone").addClass("c8").fadeIn("slow", function() {
$(".c8").delay(5000).fadeOut("slow", function() {
$("#phone").addClass("c9").fadeIn("slow", function() {
$(".c9").delay(5000).fadeOut("slow", function() {
$("#phone").addClass("c1").fadeIn("slow");
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});

You could use a recursive function like this:
function phoneCall(i){
$(".c" + i).delay(5000).fadeOut("slow", function() {
$("#phone").addClass("c" + (i + 1)).fadeIn("slow", function() {
if(i <= 9) phoneCall(i + 1);
});
});
}
phoneCall(1);

It seems that the #phone element is the only one that ever gets the c_ class. If so, you can cache the element and eliminate a bunch of code.
var phone = $("#phone"), i = 0;
(function cycle() {
i = ((i % 9) + 1);
phone.addClass("c" + i).fadeIn("slow").delay(5000).fadeOut("slow", cycle);
})();
We can even get rid of a line of code by inlining the increment.
var phone = $("#phone"), i = 0;
(function cycle() {
phone.addClass("c" + ((++i % 9) + 1)).fadeIn("slow").delay(5000).fadeOut("slow", cycle);
})();
As #charlietfl noted, you may not want it to infinitely loop. If not, add a return statement.
var phone = $("#phone"), i = 0;
(function cycle() {
if (i === 9) return;
phone.addClass("c" + ((++i % 9) + 1)).fadeIn("slow").delay(5000).fadeOut("slow", cycle);
})();
And FWIW, numbering is usually a little simpler if you use 0 based indices.
var phone = $("#phone"), i = -1;
(function cycle() {
phone.addClass("c" + (++i % 9)).fadeIn("slow").delay(5000).fadeOut("slow", cycle);
})();

You can use something like that:
function inception(fromInt, tillInt){
if (fromInt < tillInt){
$('.c' + fromInt).delay(5000).fadeOut("slow",function(){
newInt = fromInt +1;
$('#phone').addClass('c'+newInt).fadeIn("slow", function() {
inception(newInt, tillInt));
}
});
}else{
if(fromint == tillInt){
$('.c' + fromInt).delay(5000).fadeOut("slow");
}
}
}
Then add to your code:
inception(1,9);

I don't know something like this?
var num = 2;
var HandlerForC = function () {
if (num < 10) {
$("#phone").addClass("c" + num).fadeIn("slow", HandlerForPhone);
} else {
$("#phone").addClass("c1").fadeIn("slow");
}
}
var HandlerForPhone = function () {
num++;
$(".c" + (num - 1)).delay(5000).fadeOut("slow", HandlerForC);
}
HandlerForPhone();

Related

Continuous calculations on-the-go in Javascript

I have a simple calculator made in JS and works well, but when I finish my calculation and get my result (i.e. pressing the "=" button), I want the returned result to be in a saved state. The "=" button must be ready to be clicked again, and get the same result, and then add it to the save result.
I've tried many obvious ways, such as adding the result to itself (which doesn't work because the result will be multiplied by itself, not added), exploiting the eval() function and adding a "+" string to the end result, etc.
TLDR: If you go to any calculator program, and type "2+2" and click equals, you get 4. If you click equals again, you get 6 ("2+2+2").
Here's my current code:
var disp = document.getElementById("calc-output"),
acceptedInputs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, "-", ".", "+", "*", "/"];
function ud(n) {
if (acceptedInputs.includes(n)) {
if (disp.innerHTML.length == 31) {
disp.innerHTML = 0;
}
if (disp.innerHTML.length < 18) {
if (disp.innerHTML != 0) {
disp.innerHTML += n;
} else if (acceptedInputs.slice(11, -1).includes(n)) {
disp.innerHTML = 0 + n;
} else if (disp.innerHTML.toString().slice(1, 2) == ".") {
if (disp.innerHTML.toString().split(".").length-1 <= 1) {
disp.innerHTML += n;
}
} else {
disp.innerHTML = n;
}
}
}
}
function answer() {
if (eval(disp.innerHTML) == disp.innerHTML) {
disp.innerHTML = disp.innerHTML + "+"
}
c = eval(disp.innerHTML);
disp.innerHTML = c;
}
function clear() {
disp.innerHTML = "0";
}
function back() {
var str = disp.innerHTML.toString();
if (disp.innerHTML != 0 || str.charAt(1) == ".") {
if (str.length >= 2) {
str = str.slice(0, -1);
disp.innerHTML = str;
} else {
disp.innerHTML = 0;
}
}
}
document.getElementById("n1").addEventListener("click", function() {
ud(1);
});
document.getElementById("n2").addEventListener("click", function() {
ud(2);
});
document.getElementById("n3").addEventListener("click", function() {
ud(3);
});
document.getElementById("n4").addEventListener("click", function() {
ud(4);
});
document.getElementById("n5").addEventListener("click", function() {
ud(5);
});
document.getElementById("n6").addEventListener("click", function() {
ud(6);
});
document.getElementById("n7").addEventListener("click", function() {
ud(7);
});
document.getElementById("n8").addEventListener("click", function() {
ud(8);
});
document.getElementById("n9").addEventListener("click", function() {
ud(9);
});
document.getElementById("zero-button").addEventListener("click", function() {
ud(0);
});
document.getElementById("comma-button").addEventListener("click", function() {
ud('.');
});
document.getElementById("plus-button").addEventListener("click", function() {
ud('+');
});
document.getElementById("minus-button").addEventListener("click", function() {
ud('-');
});
document.getElementById("multi-button").addEventListener("click", function() {
ud('*');
});
document.getElementById("div-button").addEventListener("click", function() {
ud('/');
});
document.getElementById("back-button").addEventListener("click", function() {
back();
});
document.getElementById("clear-button").addEventListener("click", function() {
clear();
});
document.getElementById("equals-button").addEventListener("click", function() {
answer();
});
Save the last operation (e.g. " + 2") in some variable when user clicks equal. So, when he clicks again, just append saved value to the string from display.
var lastOperation = null;
function answer() {
if (eval(disp.innerHTML) == disp.innerHTML) {
// apply the last operation to displayed number
disp.innerHTML = disp.innerHTML + (lastOperation ? lastOperation[0] : '');
}
// find the last operation + | - | * | /
lastOperation = disp.innerHTML.split(new RegExp('(\\+|\\-|\\*|/).*$'));
c = eval(disp.innerHTML);
disp.innerHTML = c;
}

Stop function from re- executing for one second with settimeout

I want to prevent my function from re-executing for one second after it's last executed. I've tried the method below, but it doesn't work.
function displayOut() {
// images
document.getElementById("imgBox").style.backgroundImage = "url(" + db.rooms[roomLoc].roomImg + ")";
// Diologue box
diologueBox.innerHTML = ""; // Clear Box
teleTyperDiologue(db.rooms[roomLoc].description +
" The room contains: " +
(function() {
let x = "";
for (let i = 0; i < db.items.length; i++) {
if (db.items[i].location === roomLoc && db.items[i].hidden === false) {
x += db.items[i].name + ", "
}
}
x = x.slice(0, x.length -2);
if (x === "") {
x = " nothing of special interest";
}
return x;
})()
+ ".");
pause();
};
function pause() {
setTimeout(function() {
// Wait one second!
}, 1000);
}
You could use a pattern like this:
var executing = false;
function myFunc() {
if(!executing) {
executing = true;
//Code
console.log('Executed!');
//End code
setTimeout(function() {
executing = false;
}, 1000);
}
}
setInterval(myFunc, 100);
So in your case, this would look like this:
var executing = false;
function displayOut() {
if(!executing) {
executing = true;
// images
document.getElementById("imgBox").style.backgroundImage = "url(" + db.rooms[roomLoc].roomImg + ")";
// Diologue box
diologueBox.innerHTML = ""; // Clear Box
teleTyperDiologue(db.rooms[roomLoc].description +
" The room contains: " +
(function() {
let x = "";
for (let i = 0; i < db.items.length; i++) {
if (db.items[i].location === roomLoc && db.items[i].hidden === false) {
x += db.items[i].name + ", "
}
}
x = x.slice(0, x.length -2);
if (x === "") {
x = " nothing of special interest";
}
return x;
})()
+ ".");
setTimeout(function() {
executing = false;
}, 1000);
}
};
Try to use throttle (http://underscorejs.org/#throttle) or debounce (http://underscorejs.org/#debounce) from underscore, one of those should fit your needs
This one will achieve that:
function run () {
console.log('Im running');
pause(1000);
};
function pause(s) {
console.log('Im paused');
setTimeout(() =>{
run();
}, s)
};
run();
The code above will run every 1 sec but if you want to make sure the function cant be runned again until you decide then you could use a flag instead like:
let canExecute = true;
function run () {
if (canExecute) {
console.log('Im running');
canExecute = false;
pause(1000);
}
};
function pause(s) {
console.log('Im paused');
setTimeout(() =>{
canExecute = true;
}, s)
};
run();
run();
run();
setTimeout(() =>{
run();
}, 2000)
This code will execute run function twice, first on time and then one more after 2 sec.

Return value inside a setInterval

I want to return a value inside a setInterval. I just want to execute something with time interval and here's what I've tried:
function git(limit) {
var i = 0;
var git = setInterval(function () {
console.log(i);
if (i === limit - 1) {
clearInterval(git);
return 'done';
}
i++;
}, 800);
}
var x = git(5);
console.log(x);
And it's not working.
Is there any other way?
What I'm going to do with this is to do an animation for specific time interval. Then when i reached the limit (ex. 5x blink by $().fadeOut().fadeIn()), I want to return a value.
This is the application:
function func_a(limit) {
var i = 0;
var defer = $.Deferred();
var x = setInterval(function () {
$('#output').append('A Running Function ' + i + '<br />');
if (i == limit) {
$('#output').append('A Done Function A:' + i + '<br /><br />');
clearInterval(x);
defer.resolve('B');
}
i++;
}, 500);
return defer;
}
function func_b(limit) {
var c = 0;
var defer = $.Deferred();
var y = setInterval(function () {
$('#output').append('B Running Function ' + c + '<br />');
if (c == limit) {
$('#output').append('B Done Function B:' + c + '<br /><br />');
clearInterval(y);
defer.resolve('A');
}
c++;
}, 500);
return defer;
}
func_a(3).then( func_b(5) ).then( func_a(2) );
This is not functioning well, it should print A,A,A,Done A,B,B,B,B,B,Done B,A,A,Done A but here it is scrambled and seems the defer runs all function not one after the other but simultaneously. That's why I asked this question because I want to return return defer; inside my if...
if (i == limit) {
$('#output').append('A Done Function A:' + i + '<br /><br />');
clearInterval(x);
defer.resolve('B');
// planning to put return here instead below but this is not working
return defer;
}
Do you expect it to wait until the interval ends? That would be a real pain for the runtime, you would block the whole page. Lots of thing in JS are asynchronous these days so you have to use callback, promise or something like that:
function git(limit, callback) {
var i = 0;
var git = setInterval(function () {
console.log(i);
if (i === limit - 1) {
clearInterval(git);
callback('done');
}
i++;
}, 800);
}
git(5, function (x) {
console.log(x);
});
Using a promise it would look like this:
function git(limit, callback) {
var i = 0;
return new Promise(function (resolve) {
var git = setInterval(function () {
console.log(i);
if (i === limit - 1) {
clearInterval(git);
resolve('done');
}
i++;
}, 800);
});
}
git(5)
.then(function (x) {
console.log(x);
return new Promise(function (resolve) {
setTimeout(function () { resolve("hello"); }, 1000);
});
})
.then(function (y) {
console.log(y); // "hello" after 1000 milliseconds
});
Edit: Added pseudo-example for promise creation
Edit 2: Using two promises
Edit 3: Fix promise.resolve
Try to get a callback to your git function.
function git(limit,callback) {
var i = 0;
var git = setInterval(function () {
console.log(i);
if (i === limit - 1) {
clearInterval(git);
callback('done') // now call the callback function with 'done'
}
i++;
}, 800);
}
var x = git(5,console.log); // you passed the function you want to execute in second paramenter

Image not switching on hover

Trying to get this image to scroll through images on hover but its not work. Live demo at: http://codepen.io/bskousen/pen/Ksphr
Using jquery
script:
$(document).ready(function() {
$('.imageBox').hover(startScroll, stopScroll);
});
var scrollInterval;
var i = 2;
function startScroll() {
scrollInterval = setInterval(scrollImages(this), 100);
}
function stopScroll() {
i = 2;
$(this).children('img').fadeOut();
$(this).children('img:nth-child(1)').fadeIn();
clearInterval(scrollInterval);
}
function scrollImages(x) {
$('#count').append('running' + i + ' ');
var imageCount = $(x).children('img').length;
$(x).children('img').fadeOut();
$(x).children('img:nth-child(' + i + ')').fadeIn();
if (i == imageCount) {
i = 2;
}
else {
i++;
}
}
The setInterval is not formatted correctly. Try this:
function startScroll() {
me = this;
scrollInterval = setInterval(function(){
scrollImages(me);
}, 100);
}

jquery conflict with js script

welcome all ,
i have a problem with my images slider , it runs successfuly until poll script excuted then it stops , tried to combine both scripts didn't work also tried to use noConflict but in stops both of them .
this is the slider
(function ($) {
$.fn.s3Slider = function (vars) {
var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#sliderContent .sliderImage");
var itemsSpan = $("#sliderContent .sliderImage span");
items.each(function (i) {
$(items[i]).mouseover(function () {
mOver = true
});
$(items[i]).mouseout(function () {
mOver = false;
fadeElement(true)
})
});
var fadeElement = function (isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut / 2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if (items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut)
} else {
console.log("Poof..")
}
};
var makeSlider = function () {
current = (current != null) ? current : items[(items.length - 1)];
var currNo = jQuery.inArray(current, items) + 1;
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if (faderStat == true) {
if (!mOver) {
$(items[currNo]).fadeIn((timeOut / 6), function () {
if ($(itemsSpan[currNo]).css("bottom") == 0) {
$(itemsSpan[currNo]).slideUp((timeOut / 6), function () {
faderStat = false;
current = items[currNo];
if (!mOver) {
fadeElement(false)
}
})
} else {
$(itemsSpan[currNo]).slideDown((timeOut / 6), function () {
faderStat = false;
current = items[currNo];
if (!mOver) {
fadeElement(false)
}
})
}
})
}
} else {
if (!mOver) {
if ($(itemsSpan[currNo]).css("bottom") == 0) {
$(itemsSpan[currNo]).slideDown((timeOut / 6), function () {
$(items[currNo]).fadeOut((timeOut / 6), function () {
faderStat = true;
current = items[(currNo + 1)];
if (!mOver) {
fadeElement(false)
}
})
})
} else {
$(itemsSpan[currNo]).slideUp((timeOut / 6), function () {
$(items[currNo]).fadeOut((timeOut / 6), function () {
faderStat = true;
current = items[(currNo + 1)];
if (!mOver) {
fadeElement(false)
}
})
})
}
}
}
};
makeSlider()
}
})(jQuery);
and this is the poll script
window.onload = function() {
$(".sidePollCon").load("ar_poll.html", function(r, s, xhr) {
if (s == "error") {
$(".sidePollCon").load("poll.html");
} else {
$(".vote_booroo").html("صوت الان");
$(".viewresults").html("شاهد النتيجة");
$("fieldset p").html("");
$(".results_booroo p").html("");
$(".result_booroo").attr("src", "../images/poll_color.jpg");
}
});
};
One potential problem could be the window.onload assignment. It is very prone to conflict.
Every time you do window.onload = the previous assignemnt will be overridden. See demo here:
The output shows that the first window.onload assignment never gets called, while the jQuery alternative does get called.
jQuery.noConflict does little in this regard. All it does is to prevent override the $ symbol so that another lib can use it.
So if you are also using the window.onload event to invoke the slider, then you have conflict. You can easily solve this problem by using the jquery format:
$(window).load(function() {
...
});
However usually you would tie the event to $(document).load(function(){...}); or in short form: $(function(){...}).
So for your poll that would be:
$(function(){
$(".sidePollCon").load("ar_poll.html", function(r, s, xhr) {
if (s == "error") {
$(".sidePollCon").load("poll.html");
} else {
$(".vote_booroo").html("صوت الان");
$(".viewresults").html("شاهد النتيجة");
$("fieldset p").html("");
$(".results_booroo p").html("");
$(".result_booroo").attr("src", "../images/poll_color.jpg");
}
});
});
Hope that helps.
resolving conflicts in jquery (possibly with another JS library .. like script.aculo.us) can be resolved using noconflict()
http://api.jquery.com/jQuery.noConflict/
$.noConflict();
but make sure that u have no error in your javascript code itself. use firebug and
console.log('') to test your script.

Categories