Understanding the return this in timer.js - javascript

I was just going through the code of timer.js, playing around with the dev tools in Chrome, and basically I call the plugin like so:
var timer = $.timer(function(){
$('#add-html').html('Hello There !!');
});
timer.set({ time:5000 , autostart :true });
Even the demo uses the same example, now when the below line executed:
var timer = $.timer(function(){
$('#add-html').html('Hello There !!');
});
This line inside the plugin executes and returns this, but what is return this at this point? Is it an instance of the whole plugin? Or what is it exactly, I know without it an error is thrown, but what exactly is return this used here for and what is its value?
I use return this a lot for chaining etc in JavaScript, but somehow I am not able to understand the contextual usage of the return this here. Would anybody explain ?

You should just run this in a debugger (set either a breakpoint or a debugger statement) and evaluate this at that point.
For me, this === jQuery is true on the first run and this instanceof $.timer is true on subsequent runs.

Related

JavaScript setTimeOut function not working

I have the following JS code
$(document).ready(function(){
update_items();
adjust_size_of_menu();
});
var adjust_size_of_menu = function() {
// global boolean set in update_items_count();
if ( !items_updated )
{
alert("Treatment of update_items() not done yet");
setTimeOut( function(){ adjust_size_of_menu(); }, 1000);
}
// More treatment goes here
}
As you can see, I am setting a variable in the first function. This variable must be true before I proceed with the execution of the rest of the instructions in the second function.
The problem here is that the first time I go into adjust_size_of_menu(), it shows me the alert, which is fine. After that, it should wait 1 second then re-execute the adjust_size_of_menu() from the beginning until the item_updated boolean is true, then we continue with the rest of the code.
What is the problem with this code? I've already used the same approach elsewhere and worked just fine.
setTimeOut is not a built-in function in javascript. If you've used it elsewhere, it's because you or someone else declared it. The correct spelling is setTimeout. Note the lowercase "o".
https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout
javascript is case sensitive language and it should be setTimeout()

Requiring timeouts when testing Meteor with Velocity and Jasmine

Pretty new to meteor, velocity and jasmine so not sure if I am doing something wrong, using Jasmine for something it's not designed for, or this is just the way it works.
I am finding I need to set timeouts for pretty much all of my tests in order to get them to pass. Should this be the case or am I doing something incorrectly?
For example some tests I am running to check validation messages:
describe("add quote validation", function() {
beforeEach(function (done) {
Router.go('addQuote');
Tracker.afterFlush(function(){
done();
});
});
beforeEach(waitForRouter);
it("should show validation when Quote is missing", function(done) {
$('#quote').val('');
$('#author').val('Some author');
Meteor.setTimeout(function(){
$('#addQuoteBtn').click();
}, 500);
Meteor.setTimeout(function(){
expect($('.parsley-custom-error-message').text()).toEqual("Quote can't be empty.");
done();
}, 500);
});
}
OK, we've had this exact same problem and devised a pretty elegant solution to it, that doesn't require timeouts and is the fastest way to run your tests. Basically, we use one of two strategies, depending on what screen elements you're waiting for.
All code goes into tests/mocha/client/lib.coffee, not 100% what the Jasmine equivalent is, but it should be available to all client test code. I've left it in Coffeescript, but you can compile it on coffeescript.org into Javascript, it should work fine as well.
If whatever you do (routing or something else like changing a reactive variable) causes a Template to (re)render, you can use the Template.<your_template>.rendered hook to detect when it is finished rendering. So, we've added the following function in lib.coffee:
#afterRendered = (template,f)->
cb = template.rendered
template.rendered = ->
cb?()
template.rendered = cb
f?()
return
return
What does it do? It basically "remembers" the original rendered callback and temporarily replaces it with one that calls an extra function after the template is rendered and the original callback is called. It needs to do this sort of housekeeping to avoid breaking any code that may have depended on the rendered callback, as you're basically messing with the Meteor code directly.
In your test, you can then do something like this:
it.only "should check stuff after routing", (done)->
try
Router.go "<somewhere>"
afterRendered Template.<expected_template>, ->
<your tests here>
done()
catch e
done(e)
I'd recommend the try-catch as well, as I've noticed asynchronous errors don't always make it into the velocity system, merely giving you a timeout failure.
OK, then there are things that don't actually re-render, but are generated with JS or by some kind of "show/hide" mechanism. For that, you do need some kind of timeout, but you can reduce the "time cost" of the timeout by using a polling mechanism.
# evaluates if a JQuery element is visible or not
$.fn.visible = -> this.length > 0 and this.css('display') isnt 'none'
# This superduper JQuery helper function will trigger a function when an element becomes visible (display != none). If the element is already visible, it triggers immediately.
$.fn.onVisible = (fn,it)->
sel = this.selector
if this.visible()
console.log "Found immediately"
fn?(this)
else
counter = 0
timer = setInterval ->
counter++
el = $(sel)
if el.visible()
fn?(el)
clearInterval timer
console.log "Found on iteration #{counter}"
else
it?(el)
, 50
You can remove the console logging and secondary it iterator function if you like, they're not important. This allows you to do something like this in your test:
$('#modalId').onVisible (el)->
<tests here>
done()
, (el)->
console.log "Waiting for #{el.selector}"
You can remove the second function if you want, it is the it iterator function mentioned above. However, do note that this particular code works with "display: hidden" as the marker for invisibility (Bootstrap does this). Change it if your code uses another mechanism to hide/show parts.
Works like a charm for us!

Is it possible to stop JavaScript execution? [duplicate]

This question already has answers here:
How to terminate the script in JavaScript?
(25 answers)
Closed 7 years ago.
Is it possible in some way to stop or terminate JavaScript in a way that it prevents any further JavaScript-based execution from occuring, without reloading the browser?
I am thinking of a JavaScript equivalent of exit() in PHP.
Short answer:
throw new Error("Something went badly wrong!");
If you want to know more, keep reading.
Do you want to stop JavaScript's execution for developing/debugging?
The expression debugger; in your code, will halt the page execution, and then your browser's developer tools will allow you to review the state of your page at the moment it was frozen.
Do you want to stop your application arbitrarily and by design?
On error?
Instead of trying to stop everything, let your code handle the error. Read about Exceptions by googling. They are a smart way to let your code "jump" to error handling procedures without using tedious if/else blocks.
After reading about them, if you believe that interrupting the whole code is absolutely the only option, throwing an exception that is not going to be "caught" anywhere except in your application's "root" scope is the solution:
// creates a new exception type:
function FatalError(){ Error.apply(this, arguments); this.name = "FatalError"; }
FatalError.prototype = Object.create(Error.prototype);
// and then, use this to trigger the error:
throw new FatalError("Something went badly wrong!");
be sure you don't have catch() blocks that catch any exception; in this case modify them to rethrow your "FatalError" exception:
catch(exc){ if(exc instanceof FatalError) throw exc; else /* current code here */ }
When a task completes or an arbitrary event happens?
return; will terminate the current function's execution flow.
if(someEventHappened) return; // Will prevent subsequent code from being executed
alert("This alert will never be shown.");
Note: return; works only within a function.
In both cases...
...you may want to know how to stop asynchronous code as well. It's done with clearTimeout and clearInterval. Finally, to stop XHR (Ajax) requests, you can use the xhrObj.abort() method (which is available in jQuery as well).
You can make a JavaScript typo :D (thinking outside the box here)
thisFunctionDoesNotExistAndWasCreatedWithTheOnlyPurposeOfStopJavascriptExecutionOfAllTypesIncludingCatchAndAnyArbitraryWeirdScenario();
Or something like:
new new
Something like this might work:
function javascript_abort()
{
throw new Error('This is not an error. This is just to abort javascript');
}
Taken from here:
http://vikku.info/codesnippets/javascript/forcing-javascript-to-abort-stop-javascript-execution-at-any-time/
I do:
setTimeout(function() { debugger; }, 5000)
this way I have 5 seconds to interact with UI and then in stops. Las time I used was when I needed to leave custom tooltip visible, to do some styling changes.
No.
Even if you throw an exception, it will only kill the current event loop. Callbacks passed to setTimeout or DOM/XMLHttpRequest event handlers will still run when their time comes.
I am using
return false;
if I want to abort from JavaScript from running further downwards.
If you're in a function you can exit it using return; but that doesn't stop execution of the parent function that called that function.
You can call return early in a function, and at least that function will stop running. You can also just use throw '' to cause an error and stop the current process. But these won't stop everything. setTimeout and setInterval can make delayed functions and functions that run on a time interval, respectively. Those will continue to run. Javascript events will also continue to work as usual.
I know this is old, but I wanted to do this and I have found, in my opinion, a slightly improved solution of the throw answers. Just temporary supress the error messages and reactivate them later using setTimeout :
setTimeout(function() {
window.onerror = function(message, url, lineNumber) {
return false;
};
}, 50); // sets a slight delay and then restores normal error reporting
window.onerror = function(message, url, lineNumber) {
return true;
};
throw new Error('controlledError');
Define a variable inside the JavaScript function, set this variable to 1 if you want ot execute the function and set it to 0 if you want to stop it
var execute;
function do_something()
{
if (execute == 1)
{
// execute your function
}
else
{
// do nothing
}
}
The process is tedious, but in Firefox:
Open a blank tab/window to create a new environment for the script
from the current page
Populate that new environment with the script to execute
Activate the script in the new environment
Close (that is, kill) that new environment to ...
stop or terminate JavaScript this [in a] way to [that it] prevent[s] any further
JavaScript-based execution from occuring, without reloading the browser
Notes:
Step 4 only stops execution of JavaScript in that environment and not the scripts of any other windows
The original page is not reloaded but a new tab/window is loaded with the script
When a tab/window is closed, everything in that environment is gone: all remnants, partial results, code, etc.
Results must migrate back to the parent or another window for preservation
To rerun the code, the above steps must be repeated
Other browsers have and use different conventions.

Telling javascript to stop executing code and do background stuff in the middle of a function

Sorry about the title but could not come up with anything really informative and concise.
My situation is that I am launching a setTimeout and I want it to be able to run in the middle of a JS function (it is used to get around the issue with injecting GM functions into the web page).
unsafeWindow.testG = function(key, dValue){
var rValue;
setTimeout(function(){rValue = GM_getValue(key, dValue);}, 0);
alert(rValue);
alert(rValue);
return(rValue);
}
In the three tests rValue is still undefined (which makes sense because JS is single threaded for the most part).
So I have 2 solutions I have thought of.
Favourite:
Is there anyway to tell JS to sleep in the middle of a function and work on background stuff (like Timeouts)?
Other:
Does anyone know when this timeout will be called? Maybe after this function execution but before whatever called it starts up again?
In that case making rValue global would solve the issue (but make slightly messier coding).
Or will it wait until all JS is done executing?
In that case I would possibly need another setTimeout to process the result.
There is no way what you're asking for can be accompished. Until HTML5 is a wide spread standard, you can't do what you're asking without thinking asynchronously.
For example :
unsafeWindow.testG = function(key, dValue, callback){
var rValue;
setTimeout(function(){
rValue = GM_getValue(key, dValue);
callback(rValue);
}, 0);
}
and call this with a callback :
unsafewindow.testG(key, dValue, function(rValue) {
alert(rValue);
});
alert("foo");
For the last sippet, "foo" will be echoed before rValue, because testG will execute the timeout function only when the Javascript thread is available, or only when there's no other script running.
To answer your first question, there is no 'sleep' function in JS. In fact, there is a site devoted to trying to create one: http://www.devcheater.com/ The conclusion: you cannot.
If what you'd like to do is make the rest of your code run later, you can put that code in a function and setTimeout().
Of course, the usual way to handle the sort of scenario you have set up is with callbacks. Since you're basically waiting for the thing in setTimeout to happen, you can have it call the rest of your code whenever it's done. For example:
var fartResult
function waitAMinuteThenFart (callback) {
function fart () {
fartResult = 'fart'
callback(fartResult)
}
setTimeout(fart, 1000*60)
}
waitAMinuteThenFart(function (result) { alert(result) })

How to terminate the script in JavaScript?

How can I exit the JavaScript script much like PHP's exit or die? I know it's not the best programming practice but I need to.
"exit" functions usually quit the program or script along with an error message as paramete. For example die(...) in php
die("sorry my fault, didn't mean to but now I am in byte nirvana")
The equivalent in JS is to signal an error with the throw keyword like this:
throw new Error();
You can easily test this:
var m = 100;
throw '';
var x = 100;
x
>>>undefined
m
>>>100
JavaScript equivalent for PHP's die. BTW it just calls exit() (thanks splattne):
function exit( status ) {
// http://kevin.vanzonneveld.net
// + original by: Brett Zamir (http://brettz9.blogspot.com)
// + input by: Paul
// + bugfixed by: Hyam Singer (http://www.impact-computing.com/)
// + improved by: Philip Peterson
// + bugfixed by: Brett Zamir (http://brettz9.blogspot.com)
// % note 1: Should be considered expirimental. Please comment on this function.
// * example 1: exit();
// * returns 1: null
var i;
if (typeof status === 'string') {
alert(status);
}
window.addEventListener('error', function (e) {e.preventDefault();e.stopPropagation();}, false);
var handlers = [
'copy', 'cut', 'paste',
'beforeunload', 'blur', 'change', 'click', 'contextmenu', 'dblclick', 'focus', 'keydown', 'keypress', 'keyup', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'resize', 'scroll',
'DOMNodeInserted', 'DOMNodeRemoved', 'DOMNodeRemovedFromDocument', 'DOMNodeInsertedIntoDocument', 'DOMAttrModified', 'DOMCharacterDataModified', 'DOMElementNameChanged', 'DOMAttributeNameChanged', 'DOMActivate', 'DOMFocusIn', 'DOMFocusOut', 'online', 'offline', 'textInput',
'abort', 'close', 'dragdrop', 'load', 'paint', 'reset', 'select', 'submit', 'unload'
];
function stopPropagation (e) {
e.stopPropagation();
// e.preventDefault(); // Stop for the form controls, etc., too?
}
for (i=0; i < handlers.length; i++) {
window.addEventListener(handlers[i], function (e) {stopPropagation(e);}, true);
}
if (window.stop) {
window.stop();
}
throw '';
}
Even in simple programs without handles, events and such, it is best to put code in a main function, even when it is the only procedure :
<script>
function main()
{
//code
}
main();
</script>
This way, when you want to stop the program you can use return.
There are many ways to exit a JS or Node script. Here are the most relevant:
// This will never exit!
setInterval((function() {
return;
}), 5000);
// This will exit after 5 seconds, with signal 1
setTimeout((function() {
return process.exit(1);
}), 5000);
// This will also exit after 5 seconds, and print its (killed) PID
setTimeout((function() {
return process.kill(process.pid);
}), 5000);
// This will also exit after 5 seconds and create a core dump.
setTimeout((function() {
return process.abort();
}), 5000);
If you're in the REPL (i.e. after running node on the command line), you can type .exit to exit.
If you don't care that it's an error just write:
fail;
That will stop your main (global) code from proceeding.
Useful for some aspects of debugging/testing.
Place the debugger; keyword in your JavaScript code where you want to stop the execution. Then open your favorite browser's developer tools and reload the page. Now it should pause automatically. Open the Sources section of your tools: the debugger; keyword is highlighted and you have the option to resume script execution.
I hope it helps.
More information at:
https://developer.mozilla.org/de/docs/Tools/Debugger
http://www.w3schools.com/js/js_debugging.asp
Javascript can be disabled in devtools: ctrl+shift+j followed cltf+shift+p then type disable javascript
Possible options that mentioned above:
window.stop(); // equivalent to the 'stop' button in the browser
debugger; // debugs
for(;;); // crashes your browser
window.location.reload(); // reloads current page
If page is loaded and you don't want to debug crash or reload:
throw new Error();
Additionally clear all timeouts
var id = window.setTimeout(function() {}, 0);
while (id--) {
window.clearTimeout(id);
}
abort DOM/XMLHttpRequest
$.xhrPool = [];
$.xhrPool.abortAll = function() {
$(this).each(function(i, jqXHR) {
jqXHR.abort();
$.xhrPool.splice(i, 1);
});
}
$.ajaxSetup({
beforeSend: function(jqXHR) { $.xhrPool.push(jqXHR); },
complete: function(jqXHR) {
var i = $.xhrPool.indexOf(jqXHR);
if (i > -1) $.xhrPool.splice(i, 1);
}
});
remove all event listeners including inline
$("*").prop("onclick", null).off();
this removes scripts and recreates elements without events
$('script').remove();
$('*').each(function(){
$(this).replaceWith($(this).clone());
});
If jQuery is not available on the webpage copy-paste source code into a console.
There're might be other stuff. Let me know in a comment.
In my case I used window.stop.
The window.stop() stops further resource loading in the current browsing context, equivalent to the 'stop' button in the browser.
Because of how scripts are executed, this method cannot interrupt its parent document's loading, but it will stop its images, new windows, and other still-loading objects.
Usage: window.stop();
(source)
In JavaScript multiple ways are there, below are some of them
Method 1:
throw new Error("Something went badly wrong!");
Method 2:
return;
Method 3:
return false;
Method 4:
new new
Method 5:
write your custom function use above method and call where you needed
Note:
If you want to just pause the code execution you can use
debugger;
I think this question has been answered, click here for more information. Below is the short answer it is posted.
throw new Error("Stop script");
You can also used your browser to add break points, every browser is similar, check info below for your browser.
For Chrome break points info click here
For Firefox break points info click here
For Explorer break points info click
For Safari break points info click here
If you're looking for a way to forcibly terminate execution of all Javascript on a page, I'm not sure there is an officially sanctioned way to do that - it seems like the kind of thing that might be a security risk (although to be honest, I can't think of how it would be off the top of my head). Normally in Javascript when you want your code to stop running, you just return from whatever function is executing. (The return statement is optional if it's the last thing in the function and the function shouldn't return a value) If there's some reason returning isn't good enough for you, you should probably edit more detail into the question as to why you think you need it and perhaps someone can offer an alternate solution.
Note that in practice, most browsers' Javascript interpreters will simply stop running the current script if they encounter an error. So you can do something like accessing an attribute of an unset variable:
function exit() {
p.blah();
}
and it will probably abort the script. But you shouldn't count on that because it's not at all standard, and it really seems like a terrible practice.
EDIT: OK, maybe this wasn't such a good answer in light of Ólafur's. Although the die() function he linked to basically implements my second paragraph, i.e. it just throws an error.
throw "";
Is a misuse of the concept but probably the only option. And, yes, you will have to reset all event listeners, just like the accepted answer mentions. You would also need a single point of entry if I am right.
On the top of it: You want a page which reports to you by email as soon as it throws - you can use for example Raven/Sentry for this. But that means, you produce yourself false positives. In such case, you also need to update the default handler to filter such events out or set such events on ignore on Sentry's dashboard.
window.stop();
This does not work during the loading of the page. It stops decoding of the page as well. So you cannot really use it to offer user a javascript-free variant of your page.
debugger;
Stops execution only with debugger opened. Works great, but not a deliverable.
If you just want to stop further code from executing without "throwing" any error, you can temporarily override window.onerror as shown in cross-exit:
function exit(code) {
const prevOnError = window.onerror
window.onerror = () => {
window.onerror = prevOnError
return true
}
throw new Error(`Script termination with code ${code || 0}.`)
}
console.log("This message is logged.");
exit();
console.log("This message isn't logged.");
This little function comes pretty close to mimicking PHP's exit(). As with the other solutions, don't add anything else.
function exit(Msg)
{
Msg=Msg?'*** '+Msg:'';
if (Msg) alert(Msg);
throw new Error();
} // exit
If you use any undefined function in the script then script will stop due to "Uncaught ReferenceError". I have tried by following code and first two lines executed.
I think, this is the best way to stop the script. If there's any other way then please comment me. I also want to know another best and simple way. BTW, I didn't get exit or die inbuilt function in Javascript like PHP for terminate the script. If anyone know then please let me know.
alert('Hello');
document.write('Hello User!!!');
die(); //Uncaught ReferenceError: die is not defined
alert('bye');
document.write('Bye User!!!');
I am using iobroker and easily managed to stop the script with
stopScript();
I know this is old, but if you want a similar PHP die() function, you could do:
function die(reason) {
throw new Error(reason);
}
Usage:
console.log("Hello");
die("Exiting script..."); // Kills script right here
console.log("World!");
The example above will only print "Hello".
Wrapp with a function
(function(){
alert('start')
return;
alert('no exec')
})
i use this piece of code to stop execution:
throw new FatalError("!! Stop JS !!");
you will get a console error though but it works good for me.
To stop script execution without any error, you can include all your script into a function and execute it.
Here is an example:
(function () {
console.log('one');
return;
console.log('two');
})();
The script above will only log one.
Before use
If you need to read a function of your script outside of the script itself, remember that (normally) it doesn't work: to do it, you need to use a pre-existing variable or object (you can put your function in the window object).
The above code could be what you don't want: put an entire script in a function can have other consequences (ex. doing this, the script will run immediately and there isn't a way to modify its parts from the browser in developing, as I know, in Chrome)
This is an example, that,
if a condition exist, then terminate the script.
I use this in my SSE client side javascript, if the
<script src="sse-clint.js" host="https://sse.host" query='["q1,"q2"]' ></script>
canot be parsed right from JSON parse ...
if( ! SSE_HOST ) throw new Error(['[!] SSE.js: ERR_NOHOST - finished !']);
... anyway the general idea is:
if( error==true) throw new Error([ 'You have This error' , 'At this file', 'At this line' ]);
this will terminate/die your javasript script
Simply create a BOOL condition ,
no need for complicated code here..
If even once you turn it to true/ or multiple times,
it will both give you one line of solution/not multiple -
basically simple as that.
Not applicable in most circumstances, but I had lots of async scripts running in the browser and as a hack I do
window.reload();
to stop everything.
This code will stop execution of all JavaScripts in current window:
for(;;);
Example
console.log('READY!');
setTimeout(()=>{
/* animation call */
div.className = "anim";
console.log('SET!');
setTimeout(()=>{
setTimeout(()=>{
console.log('this code will never be executed');
},1000);
console.log('GO!');
/* BOMB */
for(;;);
console.log('this code will never be executed');
},1000);
},1000);
#div {
position: fixed;
height: 1rem; width: 1rem;
left: 0rem; top: 0rem;
transition: all 5s;
background: red;
}
/* this <div> will never reached the right bottom corner */
#div.anim {
left: calc(100vw - 1rem);
top: calc(100vh - 1rem);
}
<div id="div"></div>
i use return statement instead of throw as throw gives error in console. the best way to do it is to check the condition
if(condition){
return //whatever you want to return
}
this simply stops the execution of the program from that line, instead of giving any errors in the console.

Categories