如何在Tabletop回调函数中使用局部变量并在外部调用

Hey there! Let's break down how to fix this issue where you want to use the str variable from inside your showInfo callback outside of it. The problem comes down to two key things: variable scope and asynchronous behavior of Tabletop.js.

Why Your Original Approach Won't Work #

When you declare var str inside showInfo, that variable is only accessible within that function (thanks to function-level scope). Trying to reference it outside showInfo will result in an error or undefined because it doesn't exist in that outer scope. On top of that, Tabletop.js loads your spreadsheet data asynchronously—so even if you fixed the scope, trying to use str immediately after initializing Tabletop would happen before the data is loaded and str is assigned a value.

Solution 1: Use an Outer-Scope Variable (With Async Awareness) #

You can declare str in a scope that's accessible to both showInfo and the code that needs to use it (like updating the DOM). Just make sure you only use str after the callback has run.

Here's the modified code:

<html>
<body>
  <p id="demo"></p>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
  <script type='text/javascript'>
    var publicSpreadsheetUrl = '1ZXZVfon9ywNelbVEchOu9HQbSLZJRE-x6G2xOFPA-lA';
    // Declare str in the outer scope (accessible to all functions here)
    let str;

    function init() {
      Tabletop.init({
        key: publicSpreadsheetUrl,
        callback: showInfo,
        simpleSheet: true
      })
    }

    function showInfo(data, tabletop) {
      alert('Successfully processed!' + data.length + ' rows!')
      // Assign value to the outer-scope str
      str = JSON.stringify(data);
      // Now that str has a value, update the DOM
      updateDemoElement();
    }

    // Separate function to handle DOM updates (cleaner code)
    function updateDemoElement() {
      document.getElementById("demo").innerHTML = str;
    }

    document.write("Document <a target='_new' href='" + publicSpreadsheetUrl + "'>Here</a>");
    window.addEventListener('DOMContentLoaded', init)
  </script>
</body>
</html>

Solution 2: Avoid Global Variables (Better Practice) #

Using global variables can lead to messy code down the line. A cleaner approach is to pass the processed data directly to the function that needs it, right from the callback:

<html>
<body>
  <p id="demo"></p>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
  <script type='text/javascript'>
    var publicSpreadsheetUrl = '1ZXZVfon9ywNelbVEchOu9HQbSLZJRE-x6G2xOFPA-lA';

    function init() {
      Tabletop.init({
        key: publicSpreadsheetUrl,
        callback: showInfo,
        simpleSheet: true
      })
    }

    function showInfo(data, tabletop) {
      alert('Successfully processed!' + data.length + ' rows!')
      const str = JSON.stringify(data);
      // Pass str directly to the DOM update function
      updateDemoElement(str);
    }

    function updateDemoElement(content) {
      document.getElementById("demo").innerHTML = content;
    }

    document.write("Document <a target='_new' href='" + publicSpreadsheetUrl + "'>Here</a>");
    window.addEventListener('DOMContentLoaded', init)
  </script>
</body>
</html>

Key Takeaway #

Never try to access the data from Tabletop.js outside the callback (or a function called by the callback). Since loading the spreadsheet is asynchronous, the data won't be ready until the callback fires. Both solutions above ensure you only use the data after it's been successfully loaded.

内容的提问来源于stack exchange，提问作者Entra