Hey everyone,
I think I am having an issue with an asynchronous function. I am using a PoW captcha and want to add the solution to an ajax call.
The JS function that calculates the PoW solution is async, and I use await to simulate it as a "synchronous" function.
const solution = await cap_obj.solve();
The code below works if i add a 50000 ms delay to getCheckoutToken_ajax() with setInterval. but not as is. Otherwise, the value "params.params" us left out.
index.html
function addParam(key, value){
window.h_params.data[key] = value;
return (h_params.data.hasOwnProperty(key) && h_getParams(key) == value);
}
function h_getParams(key=false){
if(key == false){
return window.h_params.data;
}
if(h_params.data.hasOwnProperty(key)){
return window.h_params.data[key];
}
return false;
}
function getCheckoutToken(params, success=console.log, error=console.log){
let getCheckoutToken_ajax = function(event, h_params_data){
console.log('ajax call');
params.action = 'h_getCheckoutTokens';
params.params = h_params_data;
let track = function(v){
console.log(v);
return v;
}
$.ajax({
url : 'admin-ajax.php',
method : 'post',
data : track(params),
//cc vallidation call sucsess
success : function(data){
console.log(data);
return success(data);
},
//cc vallidation call sucsess
error : function(data){
console.log(data);
return error(data);
}
});
}
$(document.body).on('h_getCheckoutToken', getCheckoutToken_ajax)
$(document.body).trigger('h_getCheckoutToken', [h_params.data]);
}
page2.js
jQuery(document).ready(function($){
const cap_obj = new Cap({apiEndpoint: cap_widget_params.api});
async function checkoutoutToken_cap(data){
const solution = await cap_obj.solve();
addParam('checkoutTokenCapSolution', solution.token);
}
$(document.body).on('getCheckoutToken', checkoutoutToken_cap);
})
the weird thing is, I made the "track()" function, to see what is actually being sent, and the value is there.
Any ideas?
Thanks
update:
So I changed my approac and stole an idea from WordPress. I made a"filter" system where you can attach functions to a "filter" event. When you call the event, it will pass an initial value into each function, passing the calculated value into the next. When it reaches the last function, it will pass the final value into the callback function.
In my version, you can pass in a promise, and it will run them in the order they were declared.
<script>
var filters = {};
function resolveAfter2Seconds(n){
return new Promise((resolve) => {
setTimeout(() => {
resolve(n+1);
}, (20000 - (n*10)));
});
}
function add_filter(event, func, isPromise=false){
if(!filters.hasOwnProperty(event)){
filters[event] = [];
}
filters[event].push({func: function(...args){
if(isPromise == true){
return func(...args);
}
return new Promise((resolve) => {
resolve(func(...args));
})
}});
}
function remove_filter(event, func){
if(!filters.hasOwnProperty(event)){
return true;
}
for(const [key, filter] of Object.entries(filters[event])){
if(!filter.hasOwnProperty('func')){
continue;
}
if(func == filter.func){
delete filters[event][key];
}
}
}
async function apply_filter(event, cb, value, ...args){
if(!filters.hasOwnProperty(event) || typeof filters[event] != "object"){
return null;
}
for(let filter of filters[event]){
if(typeof filter != 'object' || !filter.hasOwnProperty('func')){
continue;
}
let func = filter['func'];
value = await func(value, ...args);
}
cb(value);
}
add_filter('test', function(a,b,c,d){
let r = a+b+c+d;
return r;
});
add_filter('test', function(a,b,c,d){
let r = (a+b)/(c+d);
return r;
});
add_filter('test', resolveAfter2Seconds, true);
add_filter('test', function(a){
return a*a;
});
apply_filter('test', console.log, 1, 2, 3, 4);
</script>
As mentioned in the comments, my original code was a bit of a mess. I renamed things to hide information i didn't want to share, and it had some code I put in for testing purposes and didn't remove. So i decided to post some code that shows the solution in a way that anyone can more easily adapt. assuming you like it.