您將需要從“添加粒子”（add particle）函數中分離出動畫循環。所有你需要做的動畫功能是清除畫布和更新和繪制對象。添加到數組應該是一個單獨的函數。每次你點擊這個按鈕，你就會再次調用requestAnimationFrame，從而編譯它的效果。 function drawNewParticle(){ //Generate particle and add to array of particles generateParticle = particleArray.push (new particle( Math.random() * 1014, Math.random() * 758, 1, 1, 10, 'hsla(0, 0%, 0%, 1)' ) )} function animate() { ctx.clearRect(0, 0, 1024, 768) for(i=0; i< clickCount; i++){ particleArray[i].update() particleArray[i].drawParticle() } requestAnimationFrame(animate)}animate();

您的代碼正常工作，但以下情況除外： firstNum = 1secondNum > 1 因為在第一個if中不會進入，而在else中則不進入。順便說一下，你可以用&&運算符來判斷第一個是真的，第二個是真的，那么。。。 function isPositive(firstNum, secondNum){ if (firstNum === 1 && secondNum === 1) { console.log('positive') } else { console.log('no positive') }}

問題是為什么 好吧，你似乎知道為什么：你從來沒有停止過你的動畫循環，所以在每一幀它都會嘗試轉到動畫循環開始時的mouse.clientN位置。然后在下一次單擊時，第二個動畫循環將啟動，與第一個動畫循環并行運行，并且兩個動畫循環將相互對抗，以朝著自己的mouse.clientN位置前進。 為了避免這種情況，正如您所確定的，您可以使用cancelAnimationFrame簡單地停止前面的循環。它所需要的只是一個可以訪問動畫范圍和單擊處理程序的變量。然而，保持動畫循環只會殺死樹木。因此，在從animation內部再次調用requestAnimationFrame之前，請檢查代碼是否已到達目標位置。 const circle = document.querySelector("circle"){ let anim_id; // to be able to cancel the animation loop window.addEventListener("click", mouse => { const animation = _ => { const getCx = Number(circle.getAttribute('cx')) const getCy = Number(circle.getAttribute('cy')) const setCx = getCx +

Firefox在v97 workers中添加了對requestAnimationFrame和cancelAnimationFrame的支持，正如您在本期中看到的那樣。評論17和18只是確認一下。

您可以排除array2的值，并包括array1的值。 var selection = ["14-3","19-5", "23-5", "40-8", "41-8"], array1 = ["23", "40"], array2 = ["5", "8"], result = selection.filter(s => { const [l, r] = s.split('-'); return !array2.includes(r) || array1.includes(l); });console.log(result);

您有一些未聲明的和額外的變量，以及缺少this，但除此之外，它看起來是一個不錯的類。沒有動畫（也稱為太快）的原因是，您直接執行this.moveBall()，而不是將this.moveBall作為回調發送到requestAnimationFrame。而且你根本沒有任何可以控制速度的東西。使用requestAnimationFrame必須檢查它自上次回調以來經過了多長時間，就像在原始代碼中作為未使用的diff變量一樣。 說到回調，使用this范圍發送回調有點棘手，通常您可能需要.bind(this)來調用回調函數： class AnimatedCircle { output; animated_circle; number; xpos; multiplier; animationRequest; myContainer; screen_width; prevTime; speed; constructor(val_1, val_2) { this.val_1 = val_1; // example of passing values this.val_2 = val_2; this.animated_circle = document.getElementById('animated_circle'); this.number = 0; this.xpos = 1; // new h

除了不將eval與外部源字符串(post-、獲取參數等一起使用外，我不會對任何安全點進行評論，但您正在尋找eval方法： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval var decrypedjs = "alert(\"test\")" //for example; function start() { eval(decrypedjs); }; start();

你得把補時時間計算在內。 以下是解決方案： var requestId = 0, animationStartTime = 0, stoppedAt = 0;function animate(time) { document.getElementById("animated").style.left = (time - animationStartTime) % 2000 / 4 + "px"; requestId = window.requestAnimationFrame(animate);}function start() { animationStartTime = window.performance.now(); requestId = window.requestAnimationFrame(animate);}function stop() { if (requestId) { window.cancelAnimationFrame(requestId); // Stop point timestamp stoppedAt = window.performance.now(); }}function continu() { // Adding stoppage time to start time. animationStartTime += window.perf

setTimeout總是遲到。 它的工作方式是 注冊執行任務的時間戳。 在每個事件循環的迭代中，檢查now是否在該時間戳之后。 執行任務。 通過這種設計，setTimeout()被迫至少花費延遲定義的時間量。例如，如果事件循環正在忙著做其他事情（比如處理用戶手勢、呼叫垃圾收集器等），它可以（而且通常會）更頻繁。 現在，由于您僅從調用前一個回調時開始請求新的超時，因此setTimeout()循環會受到time-drift的影響。每一次迭代，它都會累積這種漂移，永遠無法從中恢復，從而遠離wall-clock時間。 另一方面，requestAnimationFrame（英國皇家空軍）并沒有受到這樣的影響。實際上，監視器的V-Sync信號告訴事件循環何時必須進入“更新渲染”步驟。該信號不受CPU活動的限制，將作為一個穩定的時鐘工作。如果在一幀時rAF回調延遲了幾毫秒，那么下一幀之間的時間將更少，但標志將以固定的間隔設置，沒有漂移。 您可以通過提前安排所有計時器來驗證這一點，您的設置超時框將不再受到這種漂移的影響： const startBtn = document.querySelector('#a');const jankBtn = document.querySelector('#b');const settimeoutBox = document.querySelector('.se

=函數或代碼塊內部（如對象內部的if/else/for/whileetc.)，:）。

有人能解釋一下JS引擎是如何解釋in的嗎？ 這些示例都沒有使用for-in，如下所示： for (const key in something) 他們只是使用in操作符，這完全是另一回事（盡管，也許有點相關）。 在該代碼中有兩個因素起作用： in操作符檢查左側命名的屬性（如果需要，名稱將轉換為字符串）是否存在于右側的對象（對象本身或其任何原型）中。 數組是對象。數組索引實際上是一個屬性名。 在第二點上，讓我們看看數組[1,2,3,4,5]： +???????????????+| (array) |+???????????????+| "length": 5 | Property name is "length", value is 5| "0": 1 | Property name is "0", value is 1| "1": 2 || "2": 3 || "3": 4 || "4": 5 || [[Prototype]] |????>Array.prototype, which has various methods+???????????????+ 根據這些信息： const array = [1,2,3,4,5];console.log(0 in array); in將0轉換為"0"，并在array上檢查具有該名稱的屬性。有一個，所以結果是true。 const

Exactly true. 這里有一個簡單的例子來衡量： let i = 0;const start = Date.now();const stop = start + 5000;function raf() { requestAnimationFrame(() => { const now = Date.now(); if (now < stop){ i++; raf(); }else{ const elapsedSeconds = (now - start) / 1000; console.log('Frame rate is: %f fps', i / elapsedSeconds); } });}console.log('Testing frame rate...')raf(); 在我的機器上顯示143.740117867024。我用的是144HZ的監視器。

不，requestAnimationFrame（rAF）對另一個thread不起作用，所以是的，如果事件循環中有一個長任務，它會延遲事件循環中發生的所有其他事情，包括rAF。但是別擔心，你的rAF回調也需要一些時間來執行，如果你的click處理程序真的只需要1ms，它就不會被注意到。

原因，我相信，是因為你已經添加了向量。所以如果你想讓速度為0，你可能需要手動設置位置或者在清除它之前減去速度。 for example: if (square.x <= square2.x + square2.width && square.x >= square2.x + square2.width - square2.width/2 && square.y >= square2.y && square.y <= square2.y + square2.height) { // left square1 touching right square2 square.x = square2.x + square2.width; // <== set it to a position where they don't overlap square.x -= square.xVelocity; // <== OR just subtract it square.xVelocity = 0; } y向量會變得更復雜一些，因為你也需要考慮重力，所以設置這個值可能比調整它效果更好。

這是一個全新的提議。其背后的理念是： TC39建議在所有基本可索引類（數組、字符串、TypedArray）中添加.at（）方法 多年來，程序員一直要求能夠對JS數組進行“負索引”，就像使用Python一樣。也就是說，要求能夠寫入arr[-1]而不是arr[arr.length-1]，其中負數從最后一個元素向后計數。 不幸的是，JS的語言設計使得這不可能。[]語法不是特定于數組和字符串的；它適用于所有對象。通過索引引用一個值，比如arr[1]，實際上只是引用具有鍵“1”的對象的屬性，這是任何對象都可以擁有的。因此arr[-1]在今天的代碼中已經“起作用”，但它返回對象的“-1”屬性的值，而不是返回從末尾開始倒數的索引。 相反，該建議采用了一種更常見的方法，并建議向Array、String和TypedArray添加一個.at()方法，該方法接受一個整數值并返回該索引處的項，其negative-number語義如上所述。 所以somethingIndexed.at(n)基本上與somethingIndexed[n]相同，只是n可以是負數。 .at(-1)相當于somethingIndexed[somethingIndexed.length - 1]。 .at(-2)相當于somethingIndexed[somethingIndexed.length - 2]。 等等 const arr