标签: setinterval

我有一个每 4 秒更改一次图像的组件，如下所示：

state = {
  images: this.props.items,
  imageIndex: 0,
}
componentDidMount() {
  this.interval = setInterval(() => this.changeImage(), 4000)
}
changeImage = () => {
  const { imageIndex, images } = this.state
  if (imageIndex === images.length - 1) {
    this.setState({ imageIndex: 0 })
  } else {
    this.setState({ imageIndex: imageIndex + 1 })
  }
}
render() {
  const { images, imageIndex } = this.state
  return <img src={images[imageIndex]} />
}

该组件在页面上的 6 个位置使用。

问题是几分钟后，风扇继续运转，计算机变热。我不知道这是由于CPU使用量增加还是内存泄漏造成的。

是否有任何替代方法setInterval（以预定义的时间间隔执行重复的任务），同时使用更少的计算机资源？

这是我的类定义的样子：

timeLeft: Number;

constructor() { 
    this.timeLeft = 60;
  }

  start() {
    console.log(typeof(this.timeLeft)); // prints out 'number'

    setInterval(() => {

      this.timeLeft--; // error TS2356 occurs here
      console.log(this.timeLeft);

    }, 1000);
  }

  ngOnInit() {}

安慰：

错误 TS2356：算术操作数的类型必须为“any”、“number”或枚举类型。

我试图每 1000 毫秒返回一个 Promise 对象，但我不确定如何访问 Promise 在setInterval()回调中返回的数据。

编辑 我似乎不太清楚我的意图，所以我会尝试解释我想要做什么。我倒计时，根据指定的结束日期，每 1000 毫秒进行一次必要的计算。

这是提供我希望每 1000 毫秒作为 Pormise 值返回的返回值的代码：

calculateTimeRemaining(endDate: string) {
            const { secondsInDay, daysOfYear, secondsInHour, secondsInMinute } = this.unitsOfTime;
            let distance: number =
                (Date.parse(new Date(endDate).toString()) - Date.parse(new Date().toString())) / this.increment;

            if (distance > 0) {
                // Years left
                if (distance >= daysOfYear * secondsInDay) {
                    // 365.25 * 24 * 60 * 60
                    this.timeRemaining.years = Math.floor(distance / (daysOfYear * secondsInDay));
                    distance -= this.timeRemaining.years * daysOfYear * secondsInDay;
                }
                // …

在此代码中，有两个按钮应启用和禁用 ProgressBar。我在两个独立的函数中使用 setInterval 方法来启用 ProgressBar 和clearInterval 来禁用 ProgressBar。第一个按钮可以工作，但第二个按钮（禁用按钮）不起作用您知道我该如何修复它吗？

 let [ProgresValue, setProgresValue] = useState(0);

    var ID = null;

    const StartProgress = () => {
        ID = setInterval(() => {
            if (ProgresValue <= 1) {
                setProgresValue(ProgresValue = ProgresValue + 0.01)}
        }, 100);}




    const StopProgress = () => {

         clearInterval(ID); }

这是返回部分：

return (
        <Fragment>
            <Text>Progress Bar:{parseFloat((ProgresValue * 100).toFixed(3))}%</Text>

            {
                (Platform.OS === 'android')
                    ?
                    (<ProgressBarAndroid
                        styleAttr='Horizontal'
                        indeterminate={false}
                        progress={ProgresValue}
                        style={{ width: 300 }}

                    />)
                    :
                    (<ProgressViewIOS
                        progress={ProgresValue}

                    />) }

 <TouchableHighlight onPress={StartProgress} style={styles.button}><Text style={{ color: …

我有一个 API 每 2.5 秒调用一次。最初，响应对象内的数据为空，因为数据库仍在通过事务对其进行更新。但是在随后的第 3 次或第 4 次尝试中，我得到了数据。我正在为此编写一个可重用的函数，但是我没有定义。我的目标是继续调用 API，直到我获得路径中的值并关闭连接。请指教。

PS：下面的 API URL 没有任何延迟，但我的私有 API 有。

const getData = (url, path) => {
  const interval = setInterval(async () => {
    const result = await axios.get(url);
    if (_.has(result.data, path) && result.data[path]) {
      return result[path]
    }
  }, 2500)
  return clearInterval(interval)
}

getData('https://api.oceandrivers.com/static/resources.json', 'swaggerVersion')

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>

JS小提琴网址

请指教。

import React from "react";

function App() {
  let time = new Date().toLocaleTimeString();

  const [Time, setTime] = React.useState(time);

  function getTime() {
    time = new Date().toLocaleTimeString([], { hour12: false });
    //console.log(time);

    setTime(time);
  }
  setInterval(getTime, 2000);
  return (
    <div className="container">
      <h1>{Time}</h1>
      <button onClick={getTime}>Get Time</button>
    </div>
  );
}

export default App;

这是 React.js 的 App 组件。此代码正在创建一个运行时钟。当我注释掉 setInterval 函数时，console.log 工作正常，但是一旦我启用该功能，主屏幕上的所有内容都可以正常工作，但在控制台屏幕上，console.log(time) 正在运行无限次。请帮忙。感谢你。

我在想这样的事情：

protected override async Task OnInitializedAsync() {
  //...
  RunMeEndlesslyWithoutAwait();
  //...
}
protected async Task RunMeEndlesslyWithoutAwait() {
  while (online) {
    //... do stuff
    await Task.Delay(60000);
  }
}

但我不确定这是否是最充分的。

setInterval(...)使用 Blazor WebAssembly 的JS 函数是否有任何已知的最佳/有效方法？

我想知道什么是AJAX心跳模式,它和jquery setInterval有什么区别

因为我正在进行AJAX聊天,而且我不想每15秒拉一次数据,我想与服务器建立连接以避免延迟是什么叫做心跳？另外,我想要一个很好的教程来提出这个或任何建议

注意:我已经使用setInterval完成了实现,但我发现心跳是避免延迟的更好方法

我正在通过编写幻灯片插件来学习jQuery,如果结果很好,我将发布给任何人使用.我有一个良好的开端,但遇到了一个问题.如果你切换标签,然后回到它打开的页面,时间就搞定了.我已经看到这个问题涉及同样的事情,但我不知道如何将答案应用于我的特定情况.

1. 那么,我该如何修复SetInterval选项卡切换错误？通过切换标签看到这里:http://jsfiddle.net/8FkYj/
2. 有关代码改进的任何建议的高五.

您可以在此处查看和下载幻灯片:http://kthornbloom.com/slydeshow/或查看JSFiddle:http://jsfiddle.net/8FkYj/

(抱歉新手js代码!我至少试图评论一下)

我有一个模拟热图的按钮.当按钮点亮时,我使用setInterval函数

 <button onclick="setInterval(function(){update_map()},50);">simulate</button>

我的功能如下:

function update_map(){
  counter+=50;
  var i =1
  for(i=counter-50;i<<?php echo json_encode($lat); ?>.length & i<counter;i++){
  taxiData.push(new google.maps.LatLng(<?php echo json_encode($lat); ?>[i],<?php echo json_encode($log); ?>[i]));
 }
  var pointArray = new google.maps.MVCArray(taxiData);
heatmap = new google.maps.visualization.HeatmapLayer({
    data: pointArray
  });

  heatmap.setMap(map);
  if(i==<?php echo json_encode($lat); ?>.length )
  clearInterval(setInterval(function(){update_map()},50));
}

任何形式的帮助或建议将不胜感激.