With a background in object oriented languages I'm trying to learn some jquery, and wrap my head around asynchronous calls. My intention was to create a javascript object to contain results of async api calls, and be able to ask said object if it was done loading.
I have been trying to do it using Deferred's from jquery, and I have no problem to get snippets to work as in the documentations examples, but it won't execute in the order I expect when I put the Deferred inside my class.
How do I create javascript objects with $.Deferred as member variables?
(the timeouts in my attached code are to mimic delays in api calls)
<!DOCTYPE html>
<html>
<body>
<script src="jquery-3.1.1.js"></script>
<script>
//top level
var isdone = false;
var def = $.Deferred();
$.when(def).done(function() {
var msg = "checking topLevel isdone " + isdone;
console.log(msg);
$("body").append("<p>" + msg + "</p>");
})
var delayedCall = function() {
setTimeout(function() {
//resolve after 5 seconds
isdone = true;
def.resolve();
}, 1000);
}
delayedCall();
//inside function
function DelayedObject()
{
this.defThis = $.Deferred();
var defVar = $.Deferred();
this.delayedObjCall = function()
{
setTimeout(function()
{
//resolve after 5 seconds
isdone = true;
this.def.resolve();
}, 1000);
}
this.delayedObjCall();
this.getStatusThis = function()
{
return this.def;
}
this.getStatusVar = function()
{
return this.def;
}
}
delObj = new DelayedObject();
$.when(delObj.getStatusThis() ).done(function() {
var msg = "checking delObj (this) isdone " + isdone;
console.log(msg)
$("body").append("<p>" + msg + "</p>");
});
$.when(delObj.getStatusVar() ).done(function() {
var msg = "checking delObj (var) isdone " + isdone;
$("body").append("<p>" + msg + "</p>");
console.log(msg)
});
$(window).on("load", function()
{
var msg = "<p>" + " Page loaded " + "</p>";
$("body").append(msg);
console.log(msg);
});
</script>
</body>
</html>
Result
checking delObj (this) isdone false
checking delObj (var) isdone false
Page loaded
checking topLevel isdone true
Some issues:
You refer to the wrong objects/variables in some places (this.def does not exist, this.defThis and defVar are never used)
this is not defined in a timeout callback function (or is window in sloppy mode), so you need to use a solution for that (several possibilities, e.g. bind)
You never resolve defVar
You use one isdone variable, so do realise that once it is set to true it remains true and says little about the other promises.
Here is corrected code (simplified: omitting the change of the document content):
var isdone = false;
var def = $.Deferred();
$.when(def).done(function() {
console.log("checking topLevel isdone " + isdone);
isdone = false; // set back to false
});
var delayedCall = function() {
setTimeout(function() {
isdone = true;
def.resolve();
}, 500); // Half a second
}
delayedCall();
//inside function
function DelayedObject() {
this.defThis = $.Deferred();
var defVar = $.Deferred();
this.delayedObjCall = function() {
setTimeout(function() {
//resolve after 5 seconds
isdone = true;
this.defThis.resolve(); // refer to the correct object
}.bind(this), 1000); // provide the correct context with bind
// Also resolve the other deferred:
setTimeout(function() {
//resolve after 5 seconds
isdone = true;
defVar.resolve();
}.bind(this), 1500); //... a bit later
}
this.delayedObjCall();
this.getStatusThis = function() {
return this.defThis; // return correct object
}
this.getStatusVar = function() {
return defVar; // return correct object
}
}
delObj = new DelayedObject();
$.when(delObj.getStatusThis() ).done(function() {
console.log("checking delObj (this) isdone " + isdone);
isdone = false; // set back to false
});
$.when(delObj.getStatusVar() ).done(function() {
console.log('checking delObj (var) isdone ' + isdone)
isdone = false; // set back to false
});
$(window).on("load", function() {
console.log('Page loaded');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Related
I am tring to scrape a few sites. Here is my code:
for (var i = 0; i < urls.length; i++) {
url = urls[i];
console.log("Start scraping: " + url);
page.open(url, function () {
waitFor(function() {
return page.evaluate(function() {
return document.getElementById("progressWrapper").childNodes.length == 1;
});
}, function() {
var price = page.evaluate(function() {
// do something
return price;
});
console.log(price);
result = url + " ; " + price;
output = output + "\r\n" + result;
});
});
}
fs.write('test.txt', output);
phantom.exit();
I want to scrape all sites in the array urls, extract some information and then write this information to a text file.
But there seems to be a problem with the for loop. When scraping only one site without using a loop, all works as I want. But with the loop, first nothing happens, then the line
console.log("Start scraping: " + url);
is shown, but one time too much.
If url = {a,b,c}, then phantomjs does:
Start scraping: a
Start scraping: b
Start scraping: c
Start scraping:
It seems that page.open isn't called at all.
I am newbie to JS so I am sorry for this stupid question.
PhantomJS is asynchronous. By calling page.open() multiple times using a loop, you essentially rush the execution of the callback. You're overwriting the current request before it is finished with a new request which is then again overwritten. You need to execute them one after the other, for example like this:
page.open(url, function () {
waitFor(function() {
// something
}, function() {
page.open(url, function () {
waitFor(function() {
// something
}, function() {
// and so on
});
});
});
});
But this is tedious. There are utilities that can help you with writing nicer code like async.js. You can install it in the directory of the phantomjs script through npm.
var async = require("async"); // install async through npm
var tests = urls.map(function(url){
return function(callback){
page.open(url, function () {
waitFor(function() {
// something
}, function() {
callback();
});
});
};
});
async.series(tests, function finish(){
fs.write('test.txt', output);
phantom.exit();
});
If you don't want any dependencies, then it is also easy to define your own recursive function (from here):
var urls = [/*....*/];
function handle_page(url){
page.open(url, function(){
waitFor(function() {
// something
}, function() {
next_page();
});
});
}
function next_page(){
var url = urls.shift();
if(!urls){
phantom.exit(0);
}
handle_page(url);
}
next_page();
I'm trying to automate the navigation of some web pages with phantomJS.
What i'm trying to create is a pattern for testing and navigation, so far i got this.
For a moment ignore all the potential null pointers due to empty arrays and such :)
testSuite.js
var webPage = require('webpage');
// Test suite definition
function testSuite(name){
this.name=name;
this.startDate=new Date();
this.tests=[];
this.add=function(test){
this.tests.push(test);
};
this.start=function(){
console.log("Test Suite ["+this.name+"] - Start");
this.next();
},
this.next=function(){
console.log("neeext");
console.log(this.tests.length);
var test=this.tests[0];
this.tests.splice(0,1);
console.log("Test ["+ test.name+"]");
test.execute();
};
}
//Test definition
function test(name,testFunction){
this.name=name;
this.execute=testFunction;
}
module.exports.testSuite=testSuite;
module.exports.test=test;
FirstPageModule.js
var currentPage;
function onPageLoadFinished(status) {
var url = currentPage.url;
var filename='snapshot.png';
console.log("---------------------------------------------------------------");
console.log("Status: " + status);
console.log("Loaded: " + url);
console.log("Render filename:" + filename);
console.log("---------------------------------------------------------------");
if(status == 'success'){
currentPage.render(filename);
}
if(status=='fail'){
console.log("Status: " + status);
}
}
function open(){
currentPage.open("http://localhost:8080");
}
function login(){
var username="topSecretUsername";
var password="topSecretPassord";
currentPage.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js");
currentPage.evaluate(function(user,pass) {
$("#user").val(user);
$("#pass").val(pass);
},username,password);
currentPage.render("page.png");
currentPage.evaluate(function(){
$('#loginButton').click();
});
}
function FirstPage(){
var page = webPage.create();
currentPage=page;
this.testSuite = new testSuite("FirstPageModule");
this.testSuite.add(new test("Open First Page",open));
this.testSuite.add(new test("Login",login));
var onLoadFinished=onPageLoadFinished;
var callNextTest=this.testSuite.next;
currentPage.onLoadFinished=function(status){
onLoadFinished.apply(this,arguments);
callNextTest();
};
page.onConsoleMessage = function(msg) {
console.log(msg);
}
}
module.exports=new FirstPage();
PageTests.js
var firstPage=require('./FirstPageModule.js');
firstPage.testSuite.start();
What i want to do is to have a sequential execution of isolated functions, after each function gets executed, i take a screenshot and call the next function.
But, for some reason, the next method on the testSuite isn't getting called, or the method on the second test isn't getting executed.
What am i doing wrong?
Just make available the logName variable in the "global" scope :
var logName;
function onPageLoadComplete(status){
console.log(status);
// Call the logName function
if(typeof(logName) == "function"){
logName();
}
}
function test(){
var page = webPage.create();
this.name="TestName";
// Update logName value as a function.
logName = function(){
console.log(this.name);
}
page.onLoadFinished = onPageLoadComplete;
}
Primary, it doesn't seems to be related to phantomjs but only plain javascript, i hope that's what you need, otherwise please be more specific with your question.
You can create your own page.get implementation with a callback when a page is fully loaded.
ex: create a file module pageSupport.js
// attach listeners
Object.prototype.listeners = {};
// store and fire listeners
Object.prototype.addEventListener = function(event, callback) {
if (!this.listeners[event]) this.listeners[event] = [];
this.listeners[event].push(callback);
this[event] = function(e) {
if (listeners[event]) {
listeners[event].forEach(function(listener) {
listener.call(null, e);
});
}
}
}
// create a new reference to webpage.open method
Object.prototype._open = Object.open;
// receive an url and
// return a function success that will be called when page is loaded.
Object.prototype.get = function(url) {
return {
success : function(callback) {
this.open(url);
this.addEventListener('onLoadFinished', function(status) {
if (status == 'success') {
return callback(status);
}
});
}.bind(this)
}
}
// export as phantomjs module.
exports.Object = Object;
So you can call this module in your script and uses it as follows:
var page = require('webpage').create();
require('./pageSupport');
page.get('http://stackoverflow.com').success(function(status) {
// Now this callback will be called only when the page is fully loaded \o/
console.log(status); // logs success
});
How to implement promise into function so i can get rid off timeout, if it is even possible? I'm getting some data from factory 'Prim',function look's like :
$scope.getPre = function(id){
var url = WEB_API.MainUrl + '/api/prim/' + id +'/' + $window.sessionStorage.getItem('idsom');
Prim.getprim(function(data) {
$scope.prim1 = data;
$scope.prim = $scope.prim1[0];
}, url);
$scope.$apply();
}
and the timeout i want to rid off :
setTimeout(function() { // it can't work without timeout
$scope.getPre($routeParams.idprim);
}, 100);
Your function should return a promise, so you could use .then() on it:
$scope.getPre = function(id){
var deferred = $q.defer()
var url = WEB_API.MainUrl + '/api/prim/' + id +'/' + $window.sessionStorage.getItem('idsom');
Prim.getprim(function(data)
$scope.prim1 = data;
$scope.prim = $scope.prim1[0];
deferred.resolve();
}, url);
return deferred.promise;
}
And then just use it like this:
$scope.getPre($routeParams.idprim).then(function () {
// Do whatever you did after setTimeout
});
I have some javascript code that updates some data to a database using a http handler, but this async call is made inside an .each loop. At the end of the loop I make a call to function CancelChanges() that refreshed the page. The problem is that the page seems to refresh before the database is updated. The .each loop seems to finish after the call to CancelChanges(). How can I make sure the page is refreshed after all the async calls are completed in the .each loop?
function SaveChanges() {
if (PreSaveValidation()) {
var allChangesSucceeded = true;
var studioId = $("#param_studio_id").val();
var baseDate = $("#param_selected_month").val().substring(6, 10) + $("#param_selected_month").val().substring(0,2);
var currency = "CAD";
var vacationPct = null;
var gvAdmissible = null;
$(".editable-unsaved").each( function() {
var newSalary = $(this).text();
var disciplineId = $(this).data("disciplineid");
var seniorityId = $(this).data("seniorityid");
var handlerCommand = "";
if ($(this).data("valuetype") === "inflated") {
handlerCommand = "AddAverageSalary";
} else if ($(this).data("valuetype") === "actual") {
handlerCommand = "UpdateAverageSalary";
}
$.get("WS/AverageSalary.ashx", { command: handlerCommand, studio_id: studioId, discipline_id: disciplineId, seniority_id: seniorityId, base_date: baseDate, currency: currency, salary: newSalary, vacation_pct: vacationPct, gv_admissible: gvAdmissible }).done(function (data) {
if (data != "1") {
$(this).removeClass("editable-unsaved");
allChangesSucceeded = true;
}
else {
alert('fail');
allChangesSucceeded = false;
}
});
});
if(allChangesSucceeded) CancelChanges();
}
}
function CancelChanges() {
var href = window.location.href;
href = href.split('#')[0];
window.location.href = href;
}
You could try using Promises and jQuery $.when
Store a list of the ajax call promises:
var defereds = [];
$(".editable-unsaved").each( function() {
//...
defereds.push($.get("WS/AverageSalary.ashx" /*...*/));
}
$.when.apply($, defereds).done(function() {
CancelChanges();
});
This should, hopefully, wait for all the ajax calls to finish before calling CancelChanges()
I think you need to change your structure a little bit, using a counter and calling CancelChanges when the counter equals the number of calls.
function SaveChanges() {
if (PreSaveValidation()) {
var studioId = $("#param_studio_id").val();
var baseDate = $("#param_selected_month").val().substring(6, 10) + $("#param_selected_month").val().substring(0,2);
var currency = "CAD";
var vacationPct = null;
var gvAdmissible = null;
var editableUnsaveds = $(".editable-unsaved"); //cache the selector here, because selectors are costly
var numOfGetsReturned = 0;
editableUnsaveds.each( function() {
var newSalary = $(this).text();
var disciplineId = $(this).data("disciplineid");
var seniorityId = $(this).data("seniorityid");
var handlerCommand = "";
if ($(this).data("valuetype") === "inflated") {
handlerCommand = "AddAverageSalary";
} else if ($(this).data("valuetype") === "actual") {
handlerCommand = "UpdateAverageSalary";
}
$.get("WS/AverageSalary.ashx", { command: handlerCommand, studio_id: studioId, discipline_id: disciplineId, seniority_id: seniorityId, base_date: baseDate, currency: currency, salary: newSalary, vacation_pct: vacationPct, gv_admissible: gvAdmissible }).done(function (data) {
if (data != "1") {
$(this).removeClass("editable-unsaved");
}
else {
alert('fail');
}
if(editableUnsaveds.length === ++numOfGetsReturned){
CancelChanges(); //now it should call when the final get call finishes.
}
});
});
}
}
function CancelChanges() {
var href = window.location.href;
href = href.split('#')[0];
window.location.href = href;
}
I'd use promises. The q library is my favorite way to implement them. But since you're using JQuery, I'd recommend following a similar approach to what I outline below, but using $.when, instead of q.allSettled
I often use promises when scraping tons of websites at once -- I need to iterate through a long list of websites, make requests for content, and do something with the content when the requests return. The last thing I want to do is send requests one at a time, handling each one as it returns.
In the abstract, that looks something like this:
function scrapeFromMany() {
var promises = [];
_.forEach(urls, function(url) {
// this makes the request
var promise = scraper(url);
// this stores the promise with the others you iterate through
promises.push(promise);
});
q.allSettled(promises).then(function(res) {
// this function is executed when all of the promises (requests) have been resolved
console.log("Everything is done -- do something with the results.", res);
});
}
Fwiw, promises aren't that easy to grok if you've never used them. If that's the case, plan on spending some time getting up to speed with the concepts. They'll change (for the much much better) the way you write async javascript, and they really are the blessed path with these sorts of operations.
Asynchronously call your check function within the "done" function handler. Keep track of how many requests have completed, and only do your processing once that's equal to the total number of expected requests.
if (PreSaveValidation()) {
var allChangesSucceeded = true;
var length = $(".editable-unsaved").length;
var completedCount = 0;
// ...
$(".editable-unsaved").each( function() {
// ...
$.get("WS/AverageSalary.ashx", data).done(function (data) {
completedCount++;
if (data != "1") {
$(this).removeClass("editable-unsaved");
// don't set all changes succeeded to true here
}
else {
alert('fail');
allChangesSucceeded = false;
}
isComplete(length, completedCount, allChangesSucceeded);
});
});
}
function isComplete(totalLength, currentLength, allChangesSucceeded) {
if (currentLength == totalLength) {
// should this be !allChangesSucceeded?
if (allChangesSucceeded) CancelChanges();
}
}
This happens because you are not waiting for the requests to complete to proceed with the loop.
To achieve so you have to set the "async" flag to false.
The call to the server should be like this:
$.ajax({
url: "WS/AverageSalary.ashx",
async: false,
data:{ command: handlerCommand, studio_id: studioId, discipline_id: disciplineId, seniority_id: seniorityId, base_date: baseDate, currency: currency, salary: newSalary, vacation_pct: vacationPct, gv_admissible: gvAdmissible },
success: function (data) {
if (data != "1") {
$(this).removeClass("editable-unsaved");
allChangesSucceeded = true;
}
else {
alert('fail');
allChangesSucceeded = false;
}
}
});
I'm writing a library to access data from a server, and return formatted data to the consumer of my functions.
Here is an example of what I'd like to have:
// my code
var model = function () {
return $.ajax(myRequest).done(function (rawData) {
return treatment(data);
});
}
// client code
var useModel = function () {
var modelPromise = model();
modelPromise.done(function (formattedData) { // consume this result })
}
where formattedData is the result of my first done callback and not the rawData.
Do you have any ideas?
Thanks
R.
Regis,
jQuery's documention for .then() says :
As of jQuery 1.8, the deferred.then() method returns a new promise
that can filter the status and values of a deferred through a
function, replacing the now-deprecated deferred.pipe() method.
The second example for .then() is similar to what you want (though not involving ajax).
As far as I can tell, the necessary changes to your code are very minimal :
// my code
var model = function () {
return $.ajax(myRequest).then(function (rawData) {
return treatment(rawData);
});
}
// client code
var useModel = function () {
var modelPromise = model();
modelPromise.done(function (formattedData) { // consume this result })
}
Regis,
I like Beetroot's answer a lot. Here's an example I made while trying to understand this concept for myself: Multiple asynchronous requests with jQuery .
Source from jsFiddle:
var logIt = function (msg) {
console.log(((new Date()).toLocaleTimeString()) + ": " + msg);
}, pauseBrowser = function (ms) {
ms += new Date().getTime();
while (new Date() < ms) {}
}, dataForService1 = {
json: JSON.stringify({
serviceNumber: 1,
description: "Service #1's data",
pauseAfterward: 3 // for pausing the client-side
}),
delay: 0 // delay on the server-side
}, dataForService2 = {
json: JSON.stringify({
serviceNumber: 2,
description: "Service #2's data",
pauseAfterward: 1
}),
delay: 0 // delay on the server-side
};
function getAjaxConfiguration() {
return {
type: 'POST',
url: '/echo/json/',
success: function (data) {
var msg = "Handling service #" + data.serviceNumber + "'s success";
logIt(msg);
logIt(JSON.stringify(data));
}
};
}
var async2 = function () {
var ajaxConfig = $.extend(getAjaxConfiguration(), {
data: dataForService2
});
return $.ajax(ajaxConfig);
};
var async1 = function () {
var ajaxConfig = $.extend(getAjaxConfiguration(), {
data: dataForService1
});
return $.ajax(ajaxConfig);
};
var do2AsynchronousFunctions = function () {
var dfd = new $.Deferred();
async1()
.then(function (async1ResponseData) {
logIt("async1's then() method called, waiting " + async1ResponseData.pauseAfterward + " seconds");
pauseBrowser(async1ResponseData.pauseAfterward * 1000);
})
.done(function (a1d) {
logIt("async1's done() method was called");
return async2()
.then(function (async2ResponseData) {
logIt("async2's then() method called, waiting " + async2ResponseData.pauseAfterward + " seconds");
pauseBrowser(async2ResponseData.pauseAfterward * 1000);
})
.done(function (a2d) {
logIt("async2's done() method was called");
dfd.resolve("final return value");
});
});
return dfd.promise();
};
$.when(do2AsynchronousFunctions()).done(function (retVal) {
logIt('Everything is now done! Final return value: ' + JSON.stringify(retVal));
});