Javascript React：按下按钮时按钮不具有执行功能

如何解决Javascript React：按下按钮时按钮不具有执行功能

我想知道是否有人可以帮助我。我通过按一个按钮将字母间隔放置。我有启动按钮来执行const“ startFunction”来工作！字母间隔运行良好。但是，停止按钮不起作用，该按钮具有停止字母间隔的功能。所以我想知道我是否做错了什么。非常感谢。

import React from 'react';
import './App.css';
import Chalkboard from './chalkboard/chalkboard';
import LevelBoxes from './levelBoxes/levelBoxes';
import StartStop from './startStopButtons/startStopButtons';

function App() {
var _timer;

// Function that starts the letter interval
  const startFunction = () => {
    var allLetters = "abcdefghijklmnopqrstuvwxyz".split("");
    var y = 0;
    let start = 0;
        for (y = 0; y < allLetters.length; y++) {
           setTimeout(() => getRandom(allLetters),y*1000);
         } 
    }
// Stops startFunction
  const stopButton = () => {
        clearTimeout(_timer);
        clearTimeout(getRandom);
      }

  // letter interval function
  function getRandom (letters) {
    var randomSet = letters[Math.floor(Math.random() * letters.length)];
    console.log('set random',randomSet)
    document.getElementById("demo3").innerHTML = randomSet;
    _timer = setTimeout(() => getRandom(letters),1000);
};

return (
    <div className="App">
     
        <h1>Letter Interval Application</h1>
        <Chalkboard />
        
        <button 
        onClick={startFunction} 
        id="startButton">Start interval</button>

        <button 
        onClick={stopButton} 
        id="stopButton">Stop interval</button>

        <LevelBoxes />
         
    </div>
  ); }

export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

解决方法

您正在 stopButton 函数中调用 clearTimeout（getRandom），但是我似乎在任何地方都找不到getRandom。

将此行更改为

setTimeout(() => getRandom(allLetters),y*1000);

到

getRandom = setTimeout(() => getRandom(allLetters),y*1000);

,

startFunction内有一个循环，因此您只设置了许多timeouts，但没有在代码中清除它们。

您的逻辑有些重复。由于getRandom是递归函数，因此您可能只需要调用一次，它将在1秒后调用自身。

因此，我建议您按照以下方式重构startFunction：

const startFunction = () => {
    var allLetters = "abcdefghijklmnopqrstuvwxyz".split("");
    getRandom(allLetters);
}

getRandom将立即运行，并执行应做的工作。因为您已经将timeoutID存储到_timer。然后，在调用stopButton时，您只需要调用clearTimeout(_timer)，getRandom应该停止自行调用。