Sails.js与Node.js代码执行顺序及回调变量访问问题

Hey there! Let's tackle your two questions one by one—first making sure Part A runs completely before Part B, then understanding how to access outer variables in nested callbacks.

1. Ensuring Part A finishes before Part B #

Since file uploads are almost always asynchronous (they wait for a server response or file I/O), you can’t just write Part A code followed by Part B code directly. Instead, use Promises with async/await (the cleanest approach) or trigger Part B from within Part A’s success callback.

Example with async/await (Recommended) #

Let’s wrap your file upload logic (Part A) in a Promise, then use await to pause execution until the upload completes before running Part B:

// Part A: Wrap file upload in a Promise
function uploadFile(file) {
  return new Promise((resolve, reject) => {
    const formData = new FormData();
    formData.append('file', file);

    // Simulate an upload request (replace with your actual upload logic)
    fetch('/your-upload-endpoint', {
      method: 'POST',
      body: formData
    })
    .then(res => res.json())
    .then(uploadResult => {
      // Resolve with the uploaded filename once done
      resolve(uploadResult.filename);
    })
    .catch(err => {
      reject(new Error(`Upload failed: ${err.message}`));
    });
  });
}

// Main function to run A then B
async function executeInOrder() {
  try {
    // Step 1: Run Part A and wait for it to finish
    const fileInput = document.getElementById('file-upload');
    const selectedFile = fileInput.files[0];
    const global_d = await uploadFile(selectedFile); // Assign the filename to global_d

    // Step 2: Now run Part B with the ready global_d
    runPartB(global_d);
  } catch (error) {
    console.error(error);
  }
}

// Part B: Uses the uploaded filename
function runPartB(filename) {
  console.log(`Processing file: ${filename}`);
  // Add your Part B logic here (e.g., fetch file details, update UI)
}

// Trigger the sequence (e.g., on button click)
document.getElementById('submit-btn').addEventListener('click', executeInOrder);

Alternative: Callback-based approach #

If you prefer traditional callbacks, just call Part B directly inside Part A’s success callback:

function executeWithCallbacks() {
  let global_d;
  const fileInput = document.getElementById('file-upload');
  const selectedFile = fileInput.files[0];

  // Part A: Upload logic
  const formData = new FormData();
  formData.append('file', selectedFile);

  fetch('/your-upload-endpoint', { method: 'POST', body: formData })
  .then(res => res.json())
  .then(uploadResult => {
    global_d = uploadResult.filename;
    // Part A is done—now run Part B
    runPartB(global_d);
  })
  .catch(err => console.error(err));
}

2. Accessing outer variables in nested callbacks #

This works thanks to JavaScript’s closure feature: a nested function retains access to variables from its parent function’s scope, even after the parent function has finished executing.

Key Notes & Examples #

• Declare your outer variable (like global_d) in the parent scope of the callback.
• Use let or const instead of var to avoid variable hoisting bugs (since var has function-level scope, not block-level).

Basic Closure Example

function parentFunction() {
  let outerVariable = "I'm from the parent!";

  // Nested callback (e.g., from an async operation)
  setTimeout(() => {
    // The callback can access outerVariable thanks to closure
    console.log(outerVariable); // Outputs: I'm from the parent!
  }, 1000);
}
parentFunction();

Your Specific Use Case

In your file upload scenario, the nested upload callback can directly access and modify the global_d variable declared in the parent function:

function uploadAndProcess() {
  let global_d; // Outer local variable

  // Part A: Nested upload callback
  fetch('/upload', { /* ... */ })
  .then(res => res.json())
  .then(data => {
    // Assign value to the outer variable
    global_d = data.filename;
    console.log(`Assigned filename: ${global_d}`);
  });
}

Avoiding Common Pitfalls (Loop Variables)

If you’re using callbacks inside loops, make sure to use block-level scope to prevent variables from being overwritten:

// ❌ Bad: var has function-level scope, all callbacks get the final value
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 500); // Outputs 3, 3, 3
}

// ✅ Good: let creates block-level scope, each callback gets its own i
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 500); // Outputs 0, 1, 2
}

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