use .click() scope inside variable globally its javascript timing issue

Question

I am trying to add google trend chart on a html document. Problem is I have to grab on click keyword and pass it to google trend function so it can return data as clicked keyword. But for some reason when i call google trend function (named- TIMESERIES) inside .click scope it only load the chart not whole html so i have to call this function from outside .click scope. The reason is timing issue. Please have a look solution of this kind of timing issue solution here I cant implement this solution with my code. If you can then it really help me. Thanks in advance

<script>
  function TIMESERIES(categoryName) {
    return trends.embed.renderExploreWidget("TIMESERIES", {
      "comparisonItem": [{
        "keyword": categoryName,
        "geo": "",
        "time": "today 12-m"
      }],
      "category": 0,
      "property": ""
    }, {
      "exploreQuery": "q=arts&date=today 12-m",
      "guestPath": "https://trends.google.co.in:443/trends/embed/"
    });
  }

  var categoryName = "";

  $(".SearchMainCategory, .SearchSubCategory").click(function() {
    categoryName = $(this).find("#Level1CatsName").val();
    if (typeof categoryName === "undefined") {
      categoryName = $(this).find("#Level2CatsName").val();
    }

    // TIMESERIES(categoryName) if i call this function from where then only this function (google trend chart actually) loads and page other contents not loading. so i need to call from outside then it works fine but i cant access "categoryName" variable from ourside.
  });

  TIMESERIES(categoryName);
</script>

Naltroc · Answer 1 · 2017-10-17T04:40:59.083

With the code written as is, you are immediately calling your function like this: `TIMESERIES(categoryName = " ") because categoryName has no value, and this function is called immediately when the document is loaded.

You are correct to place your TIMESERIES function inside the click handler. What you may consider is to wrap the entire script in this kind of wrapper:

(function() {
    // This only gets called after the HTML is loaded.
    // Also be sure that you insert your scripr below its targeted elements.
    // Then put your code here. 
})

Also - you should have exactly one instance of #level1CatsName and #level2CatsName. Therefore you can shorten those lines from

categoryName = $(this).find("#Level1CatsName").val();

to

categoryName = $("#Level1CatsName").val()

As requested per the comment, you just insert the code into a wrapper (function() {}). It is still important to recognize that your tag be inserted below the targeted elements.

(function() {
      function TIMESERIES(categoryName) {
        return trends.embed.renderExploreWidget("TIMESERIES", {
          "comparisonItem": [{
            "keyword": categoryName,
            "geo": "",
            "time": "today 12-m"
          }],
          "category": 0,
          "property": ""
        }, {
          "exploreQuery": "q=arts&date=today 12-m",
          "guestPath": "https://trends.google.co.in:443/trends/embed/"
        });
      }

      var categoryName = "";

      $(".SearchMainCategory, .SearchSubCategory").click(function() {
        categoryName = $("#Level1CatsName").val();
        if (typeof categoryName === "undefined") {
          categoryName = $("#Level2CatsName").val();
        }

        TIMESERIES(categoryName);
      });
})

Can you implement it with my existing code to make it clear? — John Lk, Oct 17 '17 at 04:37

use .click() scope inside variable globally its javascript timing issue

1 Answers1