บันทึกการสร้าง: การสร้างแอปเดสก์ท็อปข่าวสารแบบไร้เฟรม

เทคโนโลยี: ReactJS/Electron/NewsAPI

ซื้อคืน: GitHub

สิ่งที่ถูกสร้างขึ้น

โปรดทราบ: API นี้ไม่ฟรี คุณสามารถพัฒนาโดยใช้มันได้ แต่ในที่สุดคุณจะต้องจ่ายเงิน ไม่เช่นนั้น API จะหยุดทำงาน ฉันไม่ทราบมาก่อน

เคล็ดลับที่เป็นประโยชน์

• อย่าพัฒนาเทียบกับ live API โดยเฉพาะ API ที่มีค่าใช้จ่าย — คัดลอกการตอบกลับและจัดเก็บสิ่งนั้นเป็นค่าจำลอง NewsAPI เป็นบริการฟรีสำหรับนักพัฒนา แต่จำกัดไว้ที่ 500 req/วัน
• วางแผนรัฐของคุณเช่น อลาบามา วอชิงตัน ฯลฯ...

โปรดทราบ: เป็นเรื่องบังเอิญที่บทความแรกในข่าวสำหรับวันนี้ในพาดหัวข่าวเด่นมีทรัมป์อยู่ด้วย ฉันไม่ได้เลือกอย่างนั้น

ผลลัพธ์สุดท้าย

ความล้มเหลวบางส่วน ปัญหาสถานะโง่

ความคิดเบื้องต้น

ฉันมีภาพ/ความคิดที่ประณีตสุดๆ ในหัวของฉัน คุณมีแอปข่าวนี้ที่โปร่งใส ดังนั้นคุณจึงเห็นรูปภาพ จากนั้นมีเนื้อหาอยู่ข้างใต้ (ชื่อ/ย่อหน้าพื้นฐาน) และแถบเลื่อนถัดไปพร้อมการตั้งค่า (ไอคอนรูปเฟือง) บางทีมันอาจจะ "เหมือนกระจก" มากกว่าสำหรับกรณีที่พื้นหลังอ่านยาก แต่ก็เป็นไปได้! ฉันเพิ่งลองดูว่าอิเลคตรอนสามารถทำหน้าต่างแบบไร้กรอบได้

ฉันต้องการสิ่งนี้เพื่ออะไร? วิธีที่จะบอกฉันว่าโลกแตกสลายในตอนเช้าหรือไม่ อินเทอร์เฟซดูเรียบร้อยเมื่อฉันคิดถึงมัน

นี่คือภาพร่างแนวคิด นี่เป็นเรื่องง่ายที่จะสร้าง ถ้าคุณสามารถสร้างอินเทอร์เฟซ/ใช้ API/สร้างสิ่งทำงานเบื้องหลังของเว็บเวิร์กเกอร์ได้ เพื่อให้รีเฟรชในเวลาที่กำหนด

โชคดีที่ NewsAPI นี้มีระดับนักพัฒนาที่มีการจำกัดคำขอ 500 คำขอต่อวัน ซึ่งเพียงพอสำหรับฉัน ฉันแค่อยากรู้ว่า "มีการเปิดตัวนิวเคลียร์หรือไม่" หรือ "เศรษฐกิจล่มสลายหรือไม่" ฯลฯ... ฉันมี "บอท TTS ที่อ่านข่าวแฮ็กเกอร์" ให้ฉันในตอนเช้า ซึ่งเป็นส่วนหนึ่งของนาฬิกาปลุกเพื่อปลุกฉันจากความตาย (การนอนหลับ)

งานสร้าง

นี่ควรจะตรงไปตรงมา สิ่งเดียวที่ฉันต้อง "เปิดใช้งาน" เช่น ตั้งค่าอิเล็กตรอนให้ไม่มีเฟรม และฉันเห็นว่ามัน "เป็นไปได้"

ขั้นตอน

• รับ API สำหรับ NewsAPI
• สร้างส่วนต่อประสานที่มีการเลื่อนการเปลี่ยน / จาง (ความทึบ)
• เพิ่ม webworker เพื่ออัพเดทตัวเองในตอนเช้า
• ปรับใช้ในอิเล็กตรอน

ดูเหมือนว่าฉันต้องใส่แอตทริบิวต์ เยี่ยมมาก ฉันจะใส่แอตทริบิวต์นั้นไว้ที่ด้านล่างสุดเพื่อให้มองเห็นได้เสมอ ฉันกังวลกับ NewsAPI ที่ "ดีแค่ไหน" ฉันไม่รู้ว่ามันจะดีเท่ากับ NPR หรืออะไรสักอย่างหรือเปล่า แต่นี่เป็นเพียงการเริ่มต้นและใช้งานง่าย/บริโภค หลังจากที่ฉันสร้างสิ่งนี้ ฉันก็คงหมดความสนใจไปแล้วเพราะฉันไม่ใช่คนติดข่าวใหญ่ (ฉันฝังหัวของฉันไว้ในทรายเหมือนนกกระจอกเทศ)

ฉันจะสังเกตว่าฉันฟุ้งซ่านเล็กน้อย (ทำอาหาร) แต่เริ่มเวลา 18:26 น. วันนี้จะเหนื่อยกว่าปกติเล็กน้อย แต่ฉันรู้สึกว่าฉันสามารถสร้างแอปอุจจาระนี้ได้

โอ้โห นี่เป็นสิ่งที่ดี สมบูรณ์แบบ/เป็นสิ่งที่ฉันกำลังมองหา มีชื่อเรื่อง รูปภาพ และเนื้อหา ฉันอาจจะใช้ตัวกรองส่วนตัวนอกเหนือจากสิ่งที่น่าสนใจที่สุด ยังไม่แน่ใจนัก ฉันต้องการดึงพาดหัวข่าวยอดนิยมแต่อาจต้องการตัวกรองเฉพาะ/ดูบางอย่างก่อนหรืออาจมาจากแหล่งข้อมูลบางแห่ง จากโครงสร้างการตอบสนองของ API ไม่มี "แท็ก" หรืออะไรสักอย่าง... ยกเว้นแหล่งที่มาที่คุณสามารถจัดเรียงด้วยการจับคู่สตริงพื้นฐาน/กรองด้วยเอาต์พุตอาร์เรย์ที่ต้องการ

อินเทอร์เฟซ

ดังนั้น... สิ่งหนึ่งที่ฉันทราบในตอนนี้ก็คือการแยกรัฐเพื่อให้การเรนเดอร์ซ้ำเล็กน้อยในเด็กไม่ส่งผลกระทบต่อสถานะของผู้ปกครอง ผู้ปกครองจะเรียก API หนึ่งครั้ง (หรือเพียงไม่กี่ครั้ง) และ UI จะเปลี่ยนโดยไม่ต้องเรียก API หลายครั้ง (ซึ่งถือว่าไม่ดี โดยนับในขีดจำกัด 500) คุณควรโทรเมื่อพนักงานโทรมาเท่านั้น (เช้าวันรุ่งขึ้น) หรือคุณกดรีเฟรชที่อินเทอร์เฟซ

7:23 PM

มันง่ายมากที่จะทำ ดังนั้นฉันจะทำมันให้สำเร็จ ฉันเคยทำข้อกำหนดทั้งหมดมาก่อนในโครงการอื่นแล้ว เคล็ดลับคือมันจะเป็นชิ้นส่วนของอึเช่น การออกแบบ/ภาพเคลื่อนไหว/การจัดการสถานะ

ฉันยังไม่ได้ใช้ส่วนประกอบที่มีสไตล์ แต่รูปแบบแอตทริบิวต์คลาส BEM CSS ที่นี่ไม่ค่อยดีนัก... มันไม่สำคัญนักที่นี่เนื่องจากแอปนั้นเรียบง่ายมาก แต่คุณรู้ไหมว่าเป็นแนวทางปฏิบัติที่ดีที่สุด

500px ดูเหมือนมีความกว้างที่ดี (Chrome ที่เล็กที่สุดสามารถย่อให้อยู่ในโหมดไม่ตอบสนอง) อืม… ฉันคิดว่า 400x500 เป็นวิธีแก้ปัญหาที่น่าสนใจ

ฉันปวดหัวมากแต่ฉันจะปรับใช้สิ่งนี้ โอ้ ใช่แล้ว ฉันคิดว่าน่าจะมีคนอ่านนะ แต่นี่เป็นเพียงการดูคร่าวๆ เท่านั้น

20:04 น. โอ้ ใช่แล้ว… ฉันต้องการบทความสองบทความเพื่อวนดู

หมายเหตุด้านข้าง… ฉันไม่ต้องการตัวโหลดล่วงหน้าต่อภาพ ทุกภาพจะต้องพร้อม ฉันมีไฟเบอร์ดังนั้นฉันจึงไม่กังวล ฉันจะให้สปินเนอร์ตรงกลางปรากฏขึ้น จากนั้นทั้งหมดจะปรากฏขึ้น/พร้อม (เรนเดอร์อินเทอร์เฟซแบบสไลด์) มัน “โง่” เพราะฉันอาจจะไม่ได้คลิกดูภาพทั้ง 20 ภาพด้วยซ้ำ… แต่เอ๊ะ… เอ๊ะ…. เอ๊ะๆๆๆ นี่คือฉันพยายามทำให้หินดูดซับเลือด โอ้ใช่แล้ว ฉันจะใช้ Roboto ด้วย

เยี่ยมมาก… ติดอยู่ใน useEffect ลูปขณะใช้ API… อาจมีคำขอเป็นร้อยคำขอตรงนั้น ฮ่าๆ บูม! แน่นอนว่าฉันสามารถใช้โปรแกรมจำลองหรือตั้งค่า API ของตัวเองได้ แต่เดี๋ยวก่อน บางครั้งคุณก็ต้องถูกไฟไหม้

20:33 น. เอาล่ะ เข้าเรื่องเลย

20:58 น. อืม ฉันเข้าใจดี การทำแถบเลื่อนไม่ใช่เรื่องง่าย เพราะคุณต้องเรนเดอร์สไลด์อื่นๆ ล่วงหน้า จากนั้นจึงวนซ้ำเพื่อทำลาย/ป้อนตัวมันเอง เรามาดูกันว่าฉันจะไปได้ไกลแค่ไหน PlainJS ฉันทำได้ดีนะ มันเป็นส่วนการจัดการสถานะการโต้ตอบ… ฉันไม่รู้ว่าบางทีมันอาจจะง่ายที่เราจะได้เห็น

21:18 น. ปัญหาโง่ๆ ในการนำเข้าแบบอักษร เคยทำมาแล้วหลายครั้ง

ฉันกังวลว่าสิ่งนี้จะดูไม่เหมือนที่ฉันจินตนาการไว้ มันเป็นรูปลักษณ์แบบ "แก้ว/โปร่งใส" ฉันไม่ใช่นักออกแบบมากนัก

21:44 น. อุ๊ย ฉันถูกไฟไหม้… วันนี้วันอะไรเหรอ? ฉันเอาแต่คิดว่าถ้าฉันตายไป ฉันจะหัวเราะ เหมือนน่าสมเพช วิวัฒนาการบอกว่าไม่ ปวดหัวกับปวดหลังตาขวานี่...แต่สองสามวันมานี้ฉันนอนไม่ค่อยหลับ เป็นความผิดของตัวเอง นอกจากนี้ฉันยังจ้องมองจอภาพทุกวันตลอด 24 ชั่วโมงอีกด้วย อยากสอบ PTO แต่มันแปลก...ตั้งแต่ WFH ไปแล้ว

ดึงเพลงนั้นออกมาเพื่อผ่านเรื่องนี้ไปได้ ฉันต้องการสิ่งนี้ มันง่าย ฉันต้องการมันสำหรับพรุ่งนี้เช้า ชมกาแฟของฉัน “จีนขึ้นนำขณะแอบพัฒนาจรวด ICBM” *sip* แบบว่า โอ้ เยี่ยมเลย สไลด์ข่าวถัดไป ข้อจำกัดความรับผิดชอบ: นั่นเป็นเรื่องตลก

21:56 น. ดำเนินต่อไป

ฉันคิดว่าอย่างน้อยที่สุดฉันต้องเรนเดอร์ 3 (อันหนึ่งทางซ้าย/อันหนึ่งทางขวา) ขึ้นอยู่กับทิศทางที่คุณไป จากนั้นคุณจะต้องมีอาเรย์ไซเคิลเพื่อจัดการสถานะ/เริ่มต้นใหม่อีกครั้ง

10:18 PM

ที่น่าสนใจคือฟังก์ชันใดที่จะส่งคืนตัวเลขก่อนและหลังโดยคำนึงถึงขอบเขตของอาร์เรย์ นี่คือเวลาที่ฉันต้องดึง JSFiddle หรือแซนด์บ็อกซ์ JS ขึ้นมาแล้วเขียนฟังก์ชันที่ด้านข้าง ฉันควรจะป้องกันของว่าง… แต่นี่คือ API สาธารณะ “มันจะไม่มีวันว่างเปล่า” ฮ่า… ฮ่า… นี่จะไม่สะอาด ฉันกำลังจะหมดเวลาแล้ว และฉันต้องสร้างต้นแบบนี้ให้เสร็จ

อาจมีวิธีที่ง่ายกว่า/สะอาดกว่าในการทำเช่นนี้ ฉันยังไม่ได้ทดสอบเงื่อนไขทั้งหมดเพียงแค่เริ่มต้น ตรงกลาง และสิ้นสุด

ฉันอาจจะโดนลมพัดอีกซึ่งถือเป็นเรื่องไม่ดี…เพราะวันนี้ฉันต้องนอนให้สบาย(ไม่ฟรี)

โอ้ ผิดพลาดเล็กน้อยที่อาร์เรย์ด้านบนควรเริ่มต้นที่ 0 อาร์เรย์ย่อยนี้ค่อนข้างจะถูกนำมาใช้เพื่อดึงวัตถุที่ตรงกันจากอาร์เรย์ของวัตถุที่จะแสดงผล ตอนนี้ฉันแค่ใช้ฟังก์ชันนั้นและวางลงในแอปของฉัน

ผู้ชาย **** นี้คืออะไร… ชุด… รัฐ… สถานะ !!! ฮ่าๆ

อัปเดตอย่างรวดเร็ว นี่คือการประดิษฐ์สิ่งที่มีอยู่แล้วขึ้นมาใหม่... ฉันอาจใช้แค่ม้าหมุนที่ลื่นไหลหรืออะไรสักอย่างก็ได้ ใช่… ฉันไม่รู้ ไม่แน่ใจว่าทำไมฉันถึงไม่ตระหนักในทันที (มองการณ์ไกลไม่ดี) จริงอยู่ที่ฉันไม่ได้พยายามทิ้งม้าหมุนไว้ที่นี่จริงๆ ใช่ ตัวเลื่อนของฉันจะเส็งเคร็งมากขึ้น ส่วนใหญ่มันเป็นความสวยงาม (ขาด) ที่ฉันตามหา ฉันมี "โฮโลแกรมแก้วเหมือนสามมิติ" อยู่ในใจ แต่ทว่า... ฉันถูกจำกัดด้วยเทคโนโลยีในยุคนั้น (วาดรูปแท่งไม้เป็นสีดำ/ขาว)

11:04 PM

โอ้… สิ่งที่น่ารังเกียจก็คือการอัปเดตสถานะการตอบสนอง… อืม ฉันอาจจะแกล้งทำเป็นด้วย css… DOM จะหายไปจริง ๆ หลังจากเลื่อน/จางหายไปอีกครั้งหลังจากการอัพเดต

ลองดูสิ มีการเลิกทำ/ส่งต่อในตัวตรวจสอบ dom น่าสนใจ

โอ้โห รัฐนี้สุดยอดมาก ฮ่าๆ เกิดอะไรขึ้น แล้วมันจะเลื่อนลงได้ยังไง

โอ้ หนึ่งในคำแปลของฉันคือ Y ไม่ใช่ X ha

23:37 น. ไม่นะ ฉันกำลังสูญเสียสถานะ ฉันเป็นของแข็งหรือของเหลว! คาดว่าจะสิ้นสุดอาร์เรย์แต่ได้รับ -1 ฉันเห็นนั่นคือสิ่งที่ทำการทดสอบ ไม่นะ เป็นเพราะฉันเอาผลตอบแทน/ค่าที่เขียนทับใน getNextArticleIndex ออก

โอ้... เป็นความคิดที่ดีที่จะใช้ "สลับ" ของ "คลาสเดียวกัน" ถึง setState เนื่องจากเมื่อคุณพยายามเลื่อนไปทางซ้ายอีกครั้ง การเรนเดอร์จะไม่ถูกเรียกเนื่องจากในทางเทคนิคแล้วสถานะไม่เปลี่ยนแปลง...

12:58 AM

แย่จังเลย แหล่งจ่ายไฟของฉันทำให้เตียงพังจริงๆ โชคดีที่ฉันมีเดสก์ท็อปอีกตัวที่สามารถจ่ายไฟจากเครื่องนั้นได้ กำลังวัตต์เกือบจะเท่ากัน เพียงแต่เคสจะใหญ่ไปหน่อย โชคดีที่ฉันไม่มีข้อมูลสูญหาย

ตอนนี้ฉันกำลังต่อสู้กับปัญหาสถานะ/ความขัดแย้งที่โง่เขลา โดยที่ 3 สไลด์ (อาร์เรย์) ต้องอัปเดต แต่ยังได้รับคลาส "สไลด์ซ้าย" นำไปใช้กับพวกเขาด้วย ดังนั้นสไลด์ใหม่จะย้ายไปทางซ้าย… มันแย่ เป็นปัญหา… นี่ เป็นอีกสิ่งหนึ่งที่ฉันยังไม่เก่งคือแยกสถานะ UI ออกจากสถานะตรรกะ

ข้อดีประการหนึ่งเกี่ยวกับเรื่องนั้นคือแท็บทั้งหมดของฉันปลิวไป เนื่องจากแอปตัวจัดการแท็บส่วนขยายของ Chrome ที่ฉันวางแผนไว้ (เพื่อเชื่อมโยงกับแอปข้ามแพลตฟอร์ม) ยังไม่เสร็จสิ้น… เอาล่ะ กระดานชนวนว่างเปล่า

ขณะนี้กำลังพยายามปฏิเสธการเรนเดอร์สถานะที่กำหนด ต่อต้านรูปแบบ แต่ฉันเคยเห็นมันทำมาก่อน แต่ฉันคิดว่านั่นเป็นส่วนประกอบตามคลาส อืม...

ฉันจะต้องข้ามเรื่องนี้ไป ฉันสามารถวนดูบทความต่างๆ ได้… ฉันแค่ไม่มีสไลด์สวยๆ… ฉันจะต้องจัดการกับปัญหาความขัดแย้งของรัฐนั้น

ส่วนอิเล็คตรอน

เนื่องจากฉันไม่มีเวลาแล้ว ฉันจะติดตั้ง Electron จากนั้นขโมยไฟล์ main.js จาก "แอปข้ามแพลตฟอร์ม" ของฉัน และมันน่าจะใช้งานได้ มันแค่แมปไปยังโฟลเดอร์บิลด์จาก React ฉันอาจจะต้องเปลี่ยนเส้นทางเล็กน้อย นี่คือสิ่งที่คุณจะได้รับจากการไม่วางแผน

ฉันชอบที่เมื่อคุณหมดหวัง คุณเพียงแค่ดึงเอาความหรูหราทั้งหมดออกไปและสร้างบางสิ่งขึ้นมา

ใช่แล้ว สิ่งที่ฉันต้องทำคือวิ่ง:

$npm init

$npm install electron --save-dev

$npm install electron-packager --save-dev

init ระบุชื่อของแอป Electron

สร้างไฟล์ main.js

ฉันจะสร้างโค้ด reactjs ปัจจุบัน เพื่อที่ฉันจะสามารถแทรกเข้าไปในบิลด์อิเล็กตรอนได้ «นี่คือตัวอย่างจากแอปข้ามแพลตฟอร์มวิธีการผูก/แมปกับบิลด์คงที่ของ reactjs จากอิเล็กตรอน

บรรทัด "electron-packager" ใน package.json มาจาก "ที่นี่"

โอ้และใน reactjs package.json คุณต้องระบุรายการ “homepage” ให้เป็นเพียง “.”

ฮะ… ครั้งนี้มันใช้งานไม่ได้ บอกว่า Not allowed to load local resource: อืม Nvm ฉันมีโฟลเดอร์ซ้อนกันอยู่ภายใน reactjs ซึ่งแตกต่างจาก cross-platform-app

โอ้พระเจ้า ฉันใกล้แล้ว! แต่ฉันขยับหน้าต่างไม่ได้ 555… แต่ก็เป็นไปได้

ข้อความจะต้องปรับปรุง แม้ว่าอ่านยากแม้จะ "เจ๋ง" ก็ตาม

โอ้ ให้ตายเถอะ ลูกศรโฮเวอร์/แสดงหายไป… อาจเกี่ยวข้องกับคลาส webkit ที่ฉันสมัคร

ฉันคิดว่าตอนนี้ก็โอเคแล้ว แต่มันก็ดูน่าเกลียด... คุณมีแนวโน้มที่จะลากภาพ ไม่ใช่ร่างกาย...

ดังนั้นฉันจะเชื่อมโยงเหตุการณ์การรีเฟรชเพื่อดึงจาก API และดึงบทความทั้งหมด ไม่มีการโหลดรูปภาพล่วงหน้า ไม่มีการเปลี่ยนภาพ มันห่วย... แต่ฉันสามารถใช้ได้ในภายหลังในวันนี้

แต่ก็ยังดีอยู่ ฉันดีใจที่เป็นไปได้ที่หน้าต่างไร้กรอบ/โปร่งใส ฉันจะทำสิ่งนี้ให้เสร็จแล้วบันทึกวิดีโอสั้นใหม่… แต่มันก็ยังใช้งานได้เหมือนเดิม แต่จะไม่ได้ใช้ข้อมูลในเครื่องที่เก็บไว้

โอ้ แดง มีเงื่อนไขข้อผิดพลาดเหมือนกันที่บทความไม่มีรูปภาพ อืม ฉันจะเพิ่มการตรวจสอบรูปภาพพื้นฐานในตอนนี้ ซึ่งเป็นสิ่งที่สำคัญที่สุดนอกเหนือจากเนื้อหาที่ฉันคิดหรือชื่อเรื่อง พยายามบีบตัวคลิกอัตโนมัติ setInterval พื้นฐาน แต่สถานะกลับผิดอีกครั้ง

ฉันจะจัดแพคเกจนี้อย่างรวดเร็ว ดังนั้นฉันจะหมดเวลา .exe

อัปเดตเมื่อวันที่ 16/05/2020

ฉันใช้เวลาพอสมควรในการหาแถบเลื่อนเพื่อทำงานใน ReactJS ฉันยังไม่ค่อยเข้าใจมันเลย “นี่คืออันที่ใกล้เคียงที่สุด” เมื่อฉันใช้โค้ดนี้กับแถบเลื่อนข่าวจริง... มันเป็นปัญหา ฉันคิดว่าเนื่องจากรูปภาพต้องโหลด/แสดงผลในขณะที่กำลังทาสีใหม่ เทียบกับ div แบบธรรมดาที่มีตัวอักษรอยู่ตรงกลางในตัวอย่าง Sandbox ด้านบน . ดังนั้น... ในขณะที่คนที่ตรวจสอบโค้ดของฉันคิด/สันนิษฐานในตอนแรกว่าฉันแค่เลื่อนสไลด์ทั้งหมด ฉันจะทำอย่างนั้น. ฉันจะเรนเดอร์ทั้ง 20 สไลด์หรืออะไรก็ตามในแถวโดยที่คุณเห็นเพียงตัวอย่างเดียวในแต่ละครั้ง จากนั้นสถานะการตอบสนองจะอัปเดตเมื่อคุณคลิกซ้าย/ขวาโดยการเลื่อนแถวไปทางซ้าย/ขวา

นั่นคือความคิดอยู่แล้ว…. เราจะดูว่ามันใช้งานได้หรือไม่ ฉันหมดความสนใจในเรื่องนี้อย่างรวดเร็ว ฉันหมายถึงว่าการบริหารจัดการของรัฐเป็นสิ่งที่ฉันต้องทำ และฉันเดาว่าฉันไม่ดีที่ ReactJS ในเวลานี้ซึ่งฉันสามารถสร้างมันขึ้นมาใน plainJS ได้ แต่การจัดการสถานะใน ReactJS นั้นไม่ตรงกับความตั้งใจของฉัน

ใช่ ฉันไม่ต้องการให้เรนเดอร์ซ้ำ แค่เลื่อน... เลื่อนไป

ใช่ นี่มันน่าเกลียดสุดๆ… สไลเดอร์ควรจะไม่มีที่สิ้นสุด แต่ถ้าฉันจะสับเปลี่ยนอาร์เรย์ ฉันจะประสบปัญหาการชนกันระหว่างสถานะเลื่อนและสถานะอาร์เรย์อีกครั้ง นี่เป็นเพียงการเพิ่ม / ลดเปอร์เซ็นต์การแปลที่ใช้กับแต่ละสไลด์อย่างแท้จริง ซึ่งควรจะเป็นกับคอนเทนเนอร์หลักส่วนกลาง แต่ใช้งานได้ดี อย่างไรก็ตาม มันควรจะเป็นอัตโนมัติ/ทำงานในพื้นหลัง ดังนั้นโดยส่วนตัวแล้วมันเป็นเรื่องปกติสำหรับฉัน/ไม่รบกวนฉันหากมันเริ่มต้นใหม่จนกว่าจะรีเฟรชตัวเอง

ว้าว setInterval โคตรจะแย่เลยถ้าคุณปล่อยให้มันทำงานนานพอ ฉันจะใช้คนทำงานเว็บเหมือนที่ฉันเคยทำมาก่อน

ฉันไม่ได้คำนึงถึงการเลื่อนการแทนที่แบบแมนนวล ดังนั้นคุณสามารถกำหนดให้ตัวจับเวลา Edge Case อยู่ที่ 8 วินาทีและคุณเพิ่งก้าวไปข้างหน้า ดังนั้นแทนที่จะรออีก 10 วินาทีก่อนที่จะเลื่อนไปข้างหน้า มันจะเลื่อนไปข้างหน้าใน 2 วินาที

ฮ่าๆๆ…. ฉันไม่รู้ว่าเกิดอะไรขึ้นอีกต่อไป ตัวแปรสถานะที่ฉันตั้งค่าไว้ยังคงว่างเปล่า ไม่ว่าฉันจะเข้าถึงตัวแปรนั้นจากทั่วโลกหรือส่งผ่านเป็นพารามิเตอร์ก็ตาม ฉันเดาว่าเป็นคนทำงานเว็บของฉันที่ทำให้รีเฟรชส่วนประกอบหรืออะไรสักอย่าง… ฉันไม่รู้