الردود الأخيرة تستغرق 2 ثانية لتظهر

مطور
1

هل هناك أي طريقة لعرض الردود الأخيرة على الفور؟ حاليًا، أستخدم هذا الرمز:

<معرف_نوع="text/discourse-plugin" الإصدار="0.11.3">
  api.onPageChange(() => {
    if (window.location.pathname === "/") {
      const container = document.querySelector(".latest-topic-list");
      if (!container || container.dataset.modified === "true") return;

      fetch("/posts.json?order=created")
        .then(res => res.json())
        .then(data => {
          const replies = data.latest_posts
            .filter(p => p.post_number > 1 && !p.topic_slug.includes("private-message"))
            .slice(0, 15);

          const topicFetches = replies.map(post =>
            fetch(`/t/${post.topic_id}.json`)
              .then(res => res.json())
              .then(topic => {
                return {
                  post,
                  category: topic.category_id ? topic.category_name : null,
                  tags: topic.tags || []
                };
              })
          );

          Promise.all(topicFetches).then(results => {
            const rows = results.map(({ post, category, tags }) => {
              const url = `/t/${post.topic_slug}/${post.topic_id}/${post.post_number}`;
              const avatarUrl = post.avatar_template.replace("{size}", "45");
              const excerpt = post.excerpt?.replace(/<\/?[^\/>]+(>|$)/g, "")?.slice(0, 120) + (post.excerpt?.length > 120 ? '...' : '') || '';

              const categoryHtml = category
                ? `<span style="font-size: 0.85em; color: #666;">Categoría: <strong>${category}</strong></span><br>`
                : '';

              const tagsHtml = tags.length
                ? `<span style="font-size: 0.85em; color: #666;">Tags: ${tags.map(tag => `<span style="background:#eee; padding:2px 6px; border-radius:3px; margin-right:4px;">${tag}</span>`).join("")}</span>`
                : '';

              return `
                <tr class="topic-list-item">
                  <td class="main-link clearfix">
                    <div style="display: flex; align-items: center; gap: 16px; padding: 8px 0;">
                      <div style="flex-shrink: 0;">
                        <a class="avatar-link" href="/u/${post.username}">
                          <img loading="lazy" width="45" height="45" src="${avatarUrl}" class="avatar" alt="${post.username}">
                        </a>
                      </div>
                      <div style="display: flex; flex-direction: column; justify-content: center; padding-top: 8px; padding-bottom: 8px;">
                        <span class="link-top-line" style="margin-bottom: 6px;">
                          <a href="${url}" class="title raw-link">${excerpt}</a>
                        </span>
                        <div class="link-bottom-line">
                          ${categoryHtml}
                          ${tagsHtml}
                        </div>
                      </div>
                    </div>
                  </td>
                </tr>
              `;
            }).join("")

            const latestRepliesContainer = document.createElement("div");
            latestRepliesContainer.className = "latest-replies-container";
            latestRepliesContainer.style.marginTop = "2em";

            latestRepliesContainer.innerHTML = `
              <table class="topic-list latest-topic-list">
                <thead>
                  <tr>
                    <th class="default">Últimos Comentários</th>
                  </tr>
                </thead>
                <tbody>
                  ${rows}
                </tbody>
              </table>
            `;

            container.parentNode.insertBefore(latestRepliesContainer, container.nextSibling);
            container.dataset.modified = "true";
          });
        })
        .catch(error => {
          console.error("Erro ao buscar últimos comentários:", error);
        });
    }
  });
</script>

لكن يستغرق الأمر في المتوسط 2 ثانية لظهور المحتوى. يحدث نفس الشيء مع كتل الشريط الجانبي الأيمن التي تحتوي على “الردود الأخيرة”. هل هذا طبيعي؟

إعجاب واحد (1)
2

لماذا تضيف أي كود؟

هذا يعمل مباشرة بدون أي شيء خاص؛ هل هو معطل لديك؟

إعجابَين (2)
3

هذه هي مشكلته.

أعتقد أن هذا متوقع لأن الكود يقوم بعدة طلبات API.
يقوم باسترداد أحدث المشاركات ثم يقوم بطلب واحد لكل معرف موضوع (15 هنا) لاسترداد اسم الفئة.

في الوقت الحالي، لا أعرف ما إذا كانت هناك طريقة أخرى بخلاف استخدام إضافة وإجراء استعلام SQL مخصص، على سبيل المثال.

3 إعجابات
4

هذا صحيح تمامًا.
ولكن هل تقوم كتل الشريط الجانبي الأيمن بطلبات أيضًا؟ إنها تعطيني نفس النتائج للردود الأخيرة. يستغرق ظهورها ثانيتين.

سأرى كيفية إنشاء إضافة. شكراً لك.

5

نعم، يفعل الشيء نفسه في استرجاع أحدث المنشورات، لكن هذا هو كل شيء. لا يحاول الحصول على اسم التصنيف، هذا هو الفرق.

إعجاب واحد (1)
6

أنا أفهم. شكراً لك على المساعدة.

سأحاول أن أجد حلاً آخر

إعجاب واحد (1)
7

Finally, I am using this for now:

cscript type="text/discourse-plugin" version="0.11.3"
  api.onPageChange(() => {
    if (window.location.pathname === "/") {
      const container = document.querySelector(".latest-topic-list");
      if (!container) return;
      
      // Prevent multiple initializations
      if (window.latestRepliesInitialized) return;
      window.latestRepliesInitialized = true;
      
      // Settings
      const POLLING_INTERVAL = 2000; // 2 seconds
      const COMMENTS_TO_SHOW = 15;
      const CACHE_DURATION = 30 * 60 * 1000; // 30 minutes
      
      // Cache keys
      const CACHE_KEY = "discourse_latest_replies_data";
      const CACHE_TIMESTAMP_KEY = "discourse_latest_replies_timestamp";
      const CACHE_LAST_ID_KEY = "discourse_latest_replies_last_id";
      
      // Store the last seen post ID for comparison
      let lastSeenPostId = parseInt(localStorage.getItem(CACHE_LAST_ID_KEY) || "0");
      let pollingIntervalId = null;
      
      console.log(`Initializing latest comments plugin (last ID in cache: ${lastSeenPostId})`);
      
      // Function to load the latest replies
      function loadLatestReplies(silent = false, forceRefresh = false) {
        // Check cache first, if not a forced update
        if (!forceRefresh) {
          const cachedData = localStorage.getItem(CACHE_KEY);
          const cacheTimestamp = localStorage.getItem(CACHE_TIMESTAMP_KEY);
          const now = Date.now();
          
          // If we have valid cache data
          if (cachedData && cacheTimestamp && now - parseInt(cacheTimestamp) < CACHE_DURATION) {
            try {
              const results = JSON.parse(cachedData);
              console.log(`Using cached data (${results.length} comments, cache from ${Math.round((now - parseInt(cacheTimestamp)) / 1000 / 60)} minutes ago)`);
              renderLatestReplies(results, false);
              
              // If not silent, no need to do more
              if (!silent) {
                return;
              }
              
              // If silent, continue to check for updates
            } catch (e) {
              console.error("Error processing cache:", e);
              // If cache error, continue to fetch fresh data
            }
          } else if (cachedData) {
            console.log("Cache expired, fetching fresh data");
          } else {
            console.log("No cache found, fetching fresh data");
          }
        } else {
          console.log("Forcing update, ignoring cache");
        }
        
        // If it is not silent, show the loading indicator
        if (!silent) {
          // If a comments container already exists, do not show the indicator
          const existingContainer = document.querySelector(".latest-replies-container");
          if (!existingContainer) {
            let loadingIndicator = document.getElementById("latest-replies-loading");
            if (!loadingIndicator) {
              loadingIndicator = document.createElement("div");
              loadingIndicator.id = "latest-replies-loading";
              loadingIndicator.innerHTML = `
                <div style="text-align: center; padding: 20px;">
                  <span class="spinner small"></span>
                  <span style="margin-left: 10px;">Loading recent comments...</span>
                </div>
              `;
              container.parentNode.insertBefore(loadingIndicator, container.nextSibling);
            }
          }
        }
        
        // Fetch the latest data
        fetch("/posts.json?order=created")
          .then(res => res.json())
          .then(data => {
            // Diagnostic log
            if (!silent) {
              console.log("Data received from API:", data.latest_posts.length);
            }
            
            const replies = data.latest_posts
              .filter(p => p.post_number > 1 && !p.topic_slug.includes("private-message"))
              .slice(0, COMMENTS_TO_SHOW);
            
            // Check for new posts
            const maxId = replies.length > 0 ? Math.max(...replies.map(post => post.id)) : 0;
            const hasNewPosts = maxId > lastSeenPostId;
            
            // Diagnostic log
            if (hasNewPosts && !silent) {
              console.log(`New posts detected. Last ID: ${lastSeenPostId}, New max ID: ${maxId}`);
            }
            
            // Update the last seen ID
            if (maxId > lastSeenPostId) {
              lastSeenPostId = maxId;
              localStorage.setItem(CACHE_LAST_ID_KEY, lastSeenPostId.toString());
            }
            
            // If there are no new posts and the check is silent, do nothing
            if (!hasNewPosts && silent && !forceRefresh) {
              return;
     ...
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.