JQuery order of execution, synchronization issue

Question

this seems like a pretty basic issue but I could figure out how to make sure the jquery gets executed before I check for HTML elements. I have a loop to enter the search bar and read results and check if the search terms returns anythings.

This does what I wants except the if structures check for element even before the search button gets clicked. The website I run the extension on is https://www.avnet.com/wps/portal/us

var searchTerms = ["internal", "null?","random", "asdfsadfa", "relay"];

var i;
for (i = 2; i < searchTerms.length; i++) {
    var curTerm = searchTerms[i];
    $('#searchInput').val(curTerm);
    $('.input-group-addon').click();
    if($(".avn-noresultspage-main-section")[0]){
        $(".avn-noresultspage-main-section").css( "border", "10px solid red" );
        alert('This is a Null!');
    }else{
        alert('Not a Null!');
    } 
}

So with some googling I see that the chaining/ call back function is the way to go. Callback function example So I call the check elements function after the click in jquery. But now nothing happens. I just run through the for loop and last click was not even executed?

How should I properly chain my actions?

var searchTerms = ["internal", "null?","random", "asdfsadfa", "relay"];

var i;
for (i = 2; i < searchTerms.length; i++) {
    var curTerm = searchTerms[i];
    $('#searchInput').val(curTerm);
    $('.input-group-addon').click(function() {
      if($(".avn-noresultspage-main-section")[0]){
        $(".avn-noresultspage-main-section").css( "border", "10px solid red" );
        alert('This is a Null!');
      }else{
        alert('Not a Null!');
      }
    } );
}

Update: I did try to use the time out function but I seems to freeze the execution of click as well.

var searchTerms = ["internal", "null?","random", "asdfsadfa", "relay"];

var i;
for (i = 2; i < searchTerms.length; i++) {
    var curTerm = searchTerms[i];

    setTimeout(function() {
        $('#searchInput').val(curTerm);
        $('.input-group-addon').click();
    }, (3 * 1000));
    if($(".avn-noresultspage-main-section")[0]){
        $(".avn-noresultspage-main-section").css( "border", "10px solid red" );
        alert('This is a Null!');
    }else{
        alert('Not a Null!');
    } 
}

Is there a way to delay after the click?

When i copied ur code in the said website, it is working fine. I did not see any issue. — sridhar.., Apr 08 '18 at 05:18
The code will run fine, but does not do what is intended. It checks the web page for search result while the click button action have not been completed by the browser. $('.input-group-addon').click(); is suppose to complete before I check if the class span exists $(".avn-noresultspage-main-section")[0] — echo, Apr 08 '18 at 05:35
So, you mean that you are clicking by using code.. not manually clicking i guess.. — sridhar.., Apr 08 '18 at 05:47

Nhon Dinh · Accepted Answer · 2018-04-08T05:39:15.463

2

Your modified code is definitely different in code logic. The syntax .click(function) is used to adding/modifying an event handler to "click" event. To make it work like the first version one, you need to add a chain trigger after it, like click(function(){...}).click(); And the reason why checking code's executing before the click event trigger is, the search event is probably a AJAX event and when you trigger click, Javascript will only "click" and execute the checking code without waiting for search event to return a result. You should use:

  $(document).ajaxSuccess(function(){
         //checking code here
});

But it apply for ALL the ajax events on this site, so the best solution imo is you should add a timeout waiting for checking code, to make sure we have the search result returned.

edited Apr 08 '18 at 05:39

answered Apr 08 '18 at 05:34

Nhon Dinh

221
1
5

I did try to use the timeout for three seconds after the click. But some how it seems to delay the click as well and still trigger the checking code before click finished. setTimeout(function() { var a = 1; }, (3 * 1000)); – echo Apr 08 '18 at 05:41
where did you put the timeout code line? Can you post the whole code block? – Nhon Dinh Apr 08 '18 at 05:42
well, the checking code MUST be in the setTimeout function scope, right the place of `var a=1;` – Nhon Dinh Apr 08 '18 at 05:58
like this? setTimeout(function() { $('#searchInput').val(curTerm); $('.input-group-addon').click(); }, (3 * 1000)); – echo Apr 08 '18 at 20:41
no...i mean the checking logic - if statement...not the triggering code – Nhon Dinh Apr 09 '18 at 02:51

JQuery order of execution, synchronization issue

1 Answers1