在JavaScript代码中，避免阻塞主要涉及到异步编程。以下是一些常用的方法来避免阻塞：

1. 使用回调函数（Callback）： 回调函数是一种传统的异步编程方法。通过将一个函数作为参数传递给另一个函数，并在适当的时机调用它，可以避免阻塞。

   function fetchData(callback) {
     setTimeout(() => {
       const data = 'Fetched data';
       callback(data);
     }, 1000);
   }
   
   fetchData((data) => {
     console.log(data); // 输出 "Fetched data"，在1秒后
   });
   

2. 使用Promise： Promise是一种更现代的异步编程方法。它表示一个尚未完成但预计将在未来完成的操作。通过使用.then()和.catch()方法，可以避免阻塞。

   function fetchData() {
     return new Promise((resolve, reject) => {
       setTimeout(() => {
         const data = 'Fetched data';
         resolve(data);
       }, 1000);
     });
   }
   
   fetchData()
     .then((data) => {
       console.log(data); // 输出 "Fetched data"，在1秒后
     })
     .catch((error) => {
       console.error(error);
     });
   

3. 使用async/await： async/await是基于Promise的一种更简洁的异步编程方法。通过在函数前添加async关键字，可以在函数内部使用await关键字等待Promise的结果，从而避免阻塞。

   async function fetchData() {
     try {
       const data = await new Promise((resolve, reject) => {
         setTimeout(() => {
           const data = 'Fetched data';
           resolve(data);
         }, 1000);
       });
       console.log(data); // 输出 "Fetched data"，在1秒后
     } catch (error) {
       console.error(error);
     }
   }
   
   fetchData();
   

4. 使用事件监听器： 事件监听器允许你在某个事件发生时执行代码，从而避免阻塞。例如，可以使用addEventListener方法监听DOM事件。

   document.getElementById('myButton').addEventListener('click', () => {
     console.log('Button clicked'); // 当按钮被点击时输出 "Button clicked"
   });
   

5. 使用Web Workers： Web Workers允许你在后台线程中运行JavaScript代码，从而避免阻塞主线程。这对于执行耗时的计算任务非常有用。

   // main.js
   const worker = new Worker('worker.js');
   worker.postMessage('Start');
   worker.onmessage = (event) => {
     console.log('Message from worker:', event.data);
   };
   
   // worker.js
   self.onmessage = (event) => {
     console.log('Message from main:', event.data);
     self.postMessage('Hello from worker');
   };
   

通过使用这些方法，可以在JavaScript代码中避免阻塞，从而提高应用程序的性能和用户体验。