JavaScript |节流

节流或有时也称为节流函数是网站中使用的一种做法。节流用于在每毫秒或特定时间间隔后调用一个函数，只有第一次单击会立即执行。

让我们看看，如果网页中没有油门函数会发生什么。然后按钮被点击的次数，该函数将被调用相同的次数。考虑这个例子。

无节流函数：在此代码中假设如果按钮被点击 500 次，那么该函数将被点击 500 次，这是由一个节流函数控制的。

• 程序：
  

HTML

    
        
        
        
          JavaScript | Without Throttling
        
    
    
        Click Me
        
           
            // Selected button with th egiven id
            const btn = document.querySelector("#nothrottle");
           
            // Add event listener to the button
            // to listen the click event
            btn.addEventListener("click", () => {
                console.log("button is clicked");
            });
        
    

• 输出：

使用节流函数：在此代码中，如果用户继续单击按钮，则每次单击都会在 1500 毫秒后执行，除了用户单击按钮后立即执行的第一次单击。

• 程序：
  

HTML

  
  
  
    JavaScript | With Throttling
  


  Click Me
  
    const btn=document.querySelector("#throttle");
     
    // Throttling Function
    const throttleFunction=(func, delay)=>{
 
      // Previously called time of the function
      let prev = 0;
      return (...args) => {
        // Current called time of the function
        let now = new Date().getTime();
 
        // Logging the difference between previously
        // called and current called timings
        console.log(now-prev, delay);
         
        // If difference is greater than delay call
        // the function again.
        if(now - prev> delay){
          prev = now;
 
          // "..." is the spread operator here
          // returning the function with the
          // array of arguments
          return func(...args); 
        }
      }
    }
    btn.addEventListener("click", throttleFunction(()=>{
      console.log("button is clicked")
    }, 1500));
  

• 输出：

节流函数的优点：

• 它可以防止函数的频繁调用。
• 它使网站更快，并控制调用特定函数的速率。