如何在按钮标签上添加间隔？

Question

我正在尝试构建一个应用程序，让相机每隔一分钟自动拍摄一次图像，我正在尝试在按钮标签上添加间隔意味着当应用程序运行，每隔一分钟自动拍摄图像

import React, { Component } from 'react';

export class CameraFeed extends Component {

    processDevices(devices) {
        devices.forEach(device => {
            console.log(device.label);
            this.setDevice(device);
        });
    }


    async setDevice(device) {
        const { deviceId } = device;
        const stream = await navigator.mediaDevices.getUserMedia({ audio: false, video: { deviceId } });
        this.videoPlayer.srcObject = stream;
        this.videoPlayer.play();
    }


    async componentDidMount() {
        const cameras = await navigator.mediaDevices.enumerateDevices();
        this.processDevices(cameras);
    }


    takePhoto = () => {
        const { sendFile } = this.props;
        const context = this.canvas.getContext('2d');
        context.drawImage(this.videoPlayer, 0, 0, 680, 360);
        this.canvas.toBlob(sendFile);
    };


    render() {
        return (
            <div className="c-camera-feed">
                <div className="c-camera-feed__viewer">
                    <video ref={ref => (this.videoPlayer = ref)} width="680" heigh="360" />
                </div>
                <button onClick={this.takePhoto}>Take photo!</button>
                <div className="c-camera-feed__stage">
                    <canvas width="680" height="360" ref={ref => (this.canvas = ref)} />
                </div>
            </div>
        );
    }
}

Answer 1

首先您需要跟踪间隔 ID

this.intervalId = null;

然后，您创建将在单击按钮时触发的事件处理程序，并将 takePhoto 订阅到一个间隔

takePhotoEachDelay = (delay = 60 * 1000) => {
  setInterval(this.takePhoto, delay);
}

当您卸载时，您需要取消订阅间隔以避免任何不需要的行为。

componentWillUnmount() {
  if (this.intervalId) { clearInterval(this.intervalId); }
}

最后，

<button onClick={this.takePhotoEachDelay }>Take photo!</button>

如何在按钮标签上添加间隔？

How add Interval on button tag?

javascript

intervals

setinterval

reactjs