Meningkatkan Prestasi dalam JavaScript: Memahami Penyahlantunan dan Pendikit

Jadual Kandungan

• Debouncing: Kelewatan Strategik
  • Cara Debouncing Berfungsi
  • Contoh Melantun
• Pendikit: Mengawal Kekerapan Acara
  • Cara Pendikit Berfungsi
  • Contoh Pendikit
• Melaksanakan dalam React: Debounce dan Throttle dengan Cangkuk Tersuai
  • Kail Tersuai untuk Menyahlantun
  • Menggunakan Cangkuk Debounce
  • Kail Tersuai untuk Pendikit
  • Menggunakan Cangkuk Pendikit
• Pemikiran Akhir

---

Pengoptimuman prestasi adalah penting dalam aplikasi web moden, terutamanya yang melibatkan interaksi pengguna seperti menaip dalam bar carian, menatal atau mengubah saiz tetingkap. Tindakan ini boleh mencetuskan banyak panggilan fungsi dalam masa yang singkat, yang boleh merendahkan prestasi.

Untuk mengurangkan perkara ini, dua teknik biasa ialah menyahlantun dan mendikit, yang membolehkan anda mengawal kadar di mana fungsi digunakan, yang membawa kepada pengalaman yang lebih lancar dan cekap.

Debouncing: Kelewatan Strategik

Menyahlantun menangguhkan pelaksanaan fungsi sehingga masa yang ditentukan telah berlalu sejak pencetus peristiwa terakhir. Ia amat membantu apabila berurusan dengan acara seperti input carian, di mana anda ingin mengelak daripada membuat permintaan API pada setiap ketukan kekunci.

Bagaimana Debouncing Berfungsi

Bayangkan input carian di mana anda mahu menunggu sehingga pengguna berhenti menaip selama 300ms sebelum membuat permintaan API. Nyahlantun membolehkan anda memastikan bahawa fungsi hanya dilaksanakan selepas pengguna menjeda menaip, menghalang panggilan API yang tidak perlu.

Contoh Debouncing

function debounce(func, delay) {
  let timeout;
  return function () {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), delay);
  };
}
function searchAPI() {
  console.log("API request made");
}
const debouncedSearch = debounce(searchAPI, 300);
debouncedSearch(); // Only triggers 300ms after the last call

Di sini, permintaan API hanya akan dibuat jika pengguna berhenti seketika selama 300ms.

Pendikit: Mengawal Kekerapan Acara

Berbeza dengan nyahlantun, pendikit memastikan fungsi dipanggil paling banyak sekali setiap selang waktu tertentu, walaupun acara terus dicetuskan. Teknik ini sesuai untuk senario seperti mengubah saiz tetingkap atau menatal, di mana peristiwa berlaku secara berterusan.

Cara Pendikit Berfungsi

Pendikitan membenarkan fungsi untuk dilaksanakan sekali sahaja dalam tempoh yang ditetapkan (cth., 200ms), memastikan fungsi itu tidak ditenggelami oleh pencetus berulang.

Contoh Pendikit

function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function () {
    const context = this;
    const args = arguments;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(() => {
        if (Date.now() - lastRan >= limit) {
          func.apply(context, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}
function updateLayout() {
  console.log("Layout updated");
}
const throttledUpdate = throttle(updateLayout, 200);
window.addEventListener("resize", throttledUpdate);

Dalam contoh ini, fungsi kemas kini reka letak hanya akan dipanggil sekali setiap 200ms semasa saiz semula tetingkap.

Melaksanakan dalam React: Debounce dan Throttle dengan Cangkuk Tersuai

Dalam React, kami boleh menggunakan cangkuk tersuai untuk menjadikan fungsi nyah lantun dan pendikit boleh diguna semula merentas komponen. Ini meningkatkan modulariti dan mengoptimumkan prestasi dalam pelbagai interaksi.

Cangkuk Tersuai untuk Menyahlantun

<p>import { useRef, useCallback } from "react";<br>
const useDebounce = (func, delay) => {<br>
  const timer = useRef(null);<br>
  return useCallback(<br>
    (...args) => {<br>
      if (timer.current) {<br>
        clearTimeout(timer.current);<br>
      }<br>
      timer.current = setTimeout(() => func(...args), delay);<br>
    },<br>
    [func, delay]<br>
  );<br>
};<br>
export default useDebounce;</p>

Menggunakan Cangkuk Debounce

<p>import React, { useState } from "react";<br>
import useDebounce from "./useDebounce";<br>
const SearchComponent = () => {<br>
  const [searchTerm, setSearchTerm] = useState("");</p>

<p>const fetchResults = (query) => {<br>
    console.log(Fetching results for </span><span class="p">${</span><span class="nx">query</span><span class="p">}</span><span class="s2">);<br>
    return new Promise((resolve) => setTimeout(resolve, 1000));<br>
  };<br>
  const debouncedFetch = useDebounce(fetchResults, 300);<br>
  const handleSearch = (e) => {<br>
    setSearchTerm(e.target.value);<br>
    debouncedFetch(e.target.value);<br>
  };<br>
  return <input value={searchTerm} onChange={handleSearch} placeholder="Search..." />;<br>
};<br>
export default SearchComponent;</p>

Cangkuk Tersuai untuk Pendikit

<p>import { useRef, useCallback } from "react";<br>
const useThrottle = (func, limit) => {<br>
  const lastRun = useRef(Date.now());<br>
  return useCallback(<br>
    (...args) => {<br>
      const now = Date.now();<br>
      if (now - lastRun.current >= limit) {<br>
        func(...args);<br>
        lastRun.current = now;<br>
      }<br>
    },<br>
    [func, limit]<br>
  );<br>
};<br>
export default useThrottle;</p>

Menggunakan Cangkuk Pendikit

<p>import React, { useEffect } from "react";<br>
import useThrottle from "./useThrottle";</p>

<p>const ScrollComponent = () => {<br>
  const handleScroll = () => {<br>
    console.log("Scrolled!");<br>
  };<br>
  const throttledScroll = useThrottle(handleScroll, 500);<br>
  useEffect(() => {<br>
    window.addEventListener("scroll", throttledScroll);<br>
    return () => window.removeEventListener("scroll", throttledScroll);<br>
  }, [throttledScroll]);<br>
  return <div style={{ height: "200vh" }}>Scroll down to see the effect</div>;<br>
};<br>
export default ScrollComponent;</p>

Fikiran Akhir

Kedua-dua menyahlantun dan mendikit adalah teknik yang amat diperlukan untuk meningkatkan prestasi dalam aplikasi moden. Walaupun nyahlantun sesuai untuk input seperti medan carian, pendikitan paling sesuai untuk acara frekuensi tinggi seperti menatal. Cangkuk tersuai dalam React, seperti useDebounce dan useThrottle, menjadikan pengoptimuman ini mudah dilaksanakan merentas apl anda, memastikan pengalaman yang lebih cekap dan responsif.

Atas ialah kandungan terperinci Meningkatkan Prestasi dalam JavaScript: Memahami Penyahlantunan dan Pendikit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!