Javascript - 获取第一个错误值时间并每秒显示一次，直到值更改为true

Question

我有一个名为showData的函数，它每秒都会连续显示数组列表。在对象数组中，有一个名为value的属性，它只包含boolean / true或false。

如果属性value为false，我想获取日期时间并每秒显示一次。就在我第一次得到value时是假的。

代码：

const showData = () => {
    const datetime = new Date();
    const dt = datetime + '';

    const lists = [
        {
            name: 'peter',
            value: false,
            datetime: dt
        },
        {
            name: 'john',
            value: true,
            datetime: dt
        }
    ]

    const list_false = lists.filter((list) => {
        return list.value === false
    })
    console.log(list_false);

    const list_true = lists.filter((list) => {
        return list.value === true
    })
    console.log(list_true);
}

const interval = setInterval(showData, 1000);

上面的代码显示如下结果：

// first
[ { name: 'peter', value: false, datetime: 'Mon Mar 12 2018 01:12:22 GMT+0700 (WIB)' } ]
[ { name: 'john', value: true, datetime: 'Mon Mar 12 2018 01:12:22 GMT+0700 (WIB)' } ]

// second
[ { name: 'peter', value: false, datetime: 'Mon Mar 12 2018 01:12:23 GMT+0700 (WIB)' } ]
[ { name: 'john', value: true, datetime: 'Mon Mar 12 2018 01:12:23 GMT+0700 (WIB)' } ]

// third
[ { name: 'peter', value: false, datetime: 'Mon Mar 12 2018 01:12:24 GMT+0700 (WIB)' } ]
[ { name: 'john', value: true, datetime: 'Mon Mar 12 2018 01:12:24 GMT+0700 (WIB)' } ]

上面的三个结果显示value: false每秒的不同日期时间。我的意思是如何在value: true之前每秒显示第一个日期时间？

我想要的结果：

// first
[ { name: 'peter', value: false, datetime: 'Mon Mar 12 2018 01:12:22 GMT+0700 (WIB)' } ]
[ { name: 'john', value: true, datetime: 'Mon Mar 12 2018 01:12:22 GMT+0700 (WIB)' } ]

// second
[ { name: 'peter', value: false, datetime: 'Mon Mar 12 2018 01:12:22 GMT+0700 (WIB)' } ]
[ { name: 'john', value: true, datetime: 'Mon Mar 12 2018 01:12:23 GMT+0700 (WIB)' } ]

// third
[ { name: 'peter', value: false, datetime: 'Mon Mar 12 2018 01:12:22 GMT+0700 (WIB)' } ]
[ { name: 'john', value: true, datetime: 'Mon Mar 12 2018 01:12:24 GMT+0700 (WIB)' } ]

如果值更改为true value: true，则结果会在实际日期时间内恢复正常：

// first
[ { name: 'peter', value: true, datetime: 'Mon Mar 12 2018 01:12:22 GMT+0700 (WIB)' } ]
[ { name: 'john', value: true, datetime: 'Mon Mar 12 2018 01:12:22 GMT+0700 (WIB)' } ]

// second
[ { name: 'peter', value: true, datetime: 'Mon Mar 12 2018 01:12:23 GMT+0700 (WIB)' } ]
[ { name: 'john', value: true, datetime: 'Mon Mar 12 2018 01:12:23 GMT+0700 (WIB)' } ]

// third
[ { name: 'peter', value: true, datetime: 'Mon Mar 12 2018 01:12:24 GMT+0700 (WIB)' } ]
[ { name: 'john', value: true, datetime: 'Mon Mar 12 2018 01:12:24 GMT+0700 (WIB)' } ]

任何人都可以帮我这么做吗？

更新了代码：

const showData = () => {
    const datetime = new Date();
    const dt = datetime + '';

    const lists = [
        {
            name: 'peter',
            value: Math.random() >= 0.5,
            datetime: dt
        },
        {
            name: 'john',
            value: Math.random() >= 0.5,
            datetime: dt
        }
    ]

    const list_false = lists.filter((list) => {
        return list.value === false
    })
    console.log(list_false);

    const list_true = lists.filter((list) => {
        return list.value === true
    })
    console.log(list_true);
}

const interval = setInterval(showData, 1000);

使用上面的代码，它会每1秒随机显示true或false。

新更新：

最近几天我真的很困惑，将上面的简单示例代码与真实代码结合起来。

我只是尝试创建最少的代码示例，所以我在这里发布的代码不多，但是在最小代码示例工作正常并且我想与实际代码结合后，结果不一样。

所以我尝试创建一个新的最小示例代码。

这是新的最小示例代码：

＆＃13;

＆＃13;

const lists = [
  {
    name: 'peter',
    value: false,
    datetime: (new Date().toString())
  },
]

const showData = () => {
  const array = [];

  const object = {
    name2: lists[0].name,
    value2: lists[0].value = Math.random() >= 0.5,
    datetime2: lists[0].datetime
  }
  array.push(object);

  const datetime3 = (new Date().toString());
  array.reduce((acc, x) => {
    if(!x.value2) return acc.concat(x);
    x.datetime2 = datetime3;
    return acc.concat(x);
  },[])
  console.log(array);
}

const interval = setInterval(showData, 1000);

const stopToSee = setTimeout(function() {
  clearInterval(interval);
}, 20000)

＆＃13;

.as-console-wrapper { max-height: 100% !important; top: 0; }

＆＃13;

＆＃13;

＆＃13;

如果我们尝试运行上面的新的最小示例代码，我们可以看到value2过去3个条件（false - ＆gt; true - ＆gt; false）。第一个错误条件下的日期时间与第三个错误条件下的日期时间相等。

如何使第一个错误条件下的日期时间与第三个错误条件不同。我的意思是，第三个错误条件显示第三个错误条件下的当前日期时间，而不是第一个错误条件日期时间。

注意：我真的需要在object中创建新的showData，它将每1秒连续显示一次数据，因为在实际代码中我使用promise来生成新值。因此，在生成新值之后，我必须使用其中的新值创建新对象。

任何人都可以帮我解决这个问题吗？

新的最小示例代码结果：

// first false condition, time shown 00:00:00
[
  {
    "name2": "peter",
    "value2": false,
    "datetime2": "Sun Mar 19 2018 00:00:00 GMT+0700 (WIB)"
  }
]

// second true condition
[
  {
    "name2": "peter",
    "value2": true,
    "datetime2": "Sun Mar 19 2018 00:00:02 GMT+0700 (WIB)"
  }
]
[
  {
    "name2": "peter",
    "value2": true,
    "datetime2": "Sun Mar 19 2018 00:00:03 GMT+0700 (WIB)"
  }
]

// third false condition, time shown 00:00:00
[
  {
    "name2": "peter",
    "value2": false,
    "datetime2": "Sun Mar 19 2018 00:00:00 GMT+0700 (WIB)"
  }
]
[
  {
    "name2": "peter",
    "value2": false,
    "datetime2": "Sun Mar 19 2018 00:00:00 GMT+0700 (WIB)"
  }
]

我想要的结果：

// first false condition, time shown 00:00:00
[
  {
    "name2": "peter",
    "value2": false,
    "datetime2": "Sun Mar 19 2018 00:00:00 GMT+0700 (WIB)"
  }
]

// second true condition
[
  {
    "name2": "peter",
    "value2": true,
    "datetime2": "Sun Mar 19 2018 00:00:02 GMT+0700 (WIB)"
  }
]
[
  {
    "name2": "peter",
    "value2": true,
    "datetime2": "Sun Mar 19 2018 00:00:03 GMT+0700 (WIB)"
  }
]

// third false condition, time shown 00:00:04
[
  {
    "name2": "peter",
    "value2": false,
    "datetime2": "Sun Mar 19 2018 00:00:04 GMT+0700 (WIB)"
  }
]
[
  {
    "name2": "peter",
    "value2": false,
    "datetime2": "Sun Mar 19 2018 00:00:04 GMT+0700 (WIB)"
  }
]

Answer 1

您可以使用closure和IIFE：

const lists = [ // one single instance of lists
  {
    name: 'peter',
    value: false,
    date: new Date() + ''
  },
  {
    name: 'john',
    value: true,
    date: new Date() + ''
  }
]

const func = (function showData (lists) {
    return () => {
      const datetime = new Date();
      const dt = datetime + '';

      // changing only value property
      lists[0].prevValue = lists[0].value;
      lists[1].prevValue = lists[1].value;
      lists[0].value = Math.random() >= 0.5;
      lists[1].value = Math.random() >= 0.5;

      lists.reduce((acc, x) => {
        if(!x.value && !x.prevValue) return acc.concat(x);
        x.date = dt;
        return acc.concat(x);
      },[])

      const list_false = lists.filter((list) => {
          return list.value === false
      })
      console.log(list_false);

      const list_true = lists.filter((list) => {
          return list.value === true
      })
      console.log(list_true);
    }
})(lists)

const interval = setInterval(func, 1000);

const stopToSee = setTimeout(function() {
  clearInterval(interval);
}, 10000)

.as-console-wrapper { max-height: 100% !important; top: 0; }

您可以动态更改list值，并相应地更改您的工作。

Answer 2

您正在该功能中创建列表。因此，每次调用该函数时，该列表与上一次调用中的列表不同。如果您希望列表中的对象在调用之间保持状态，则需要在函数外部定义它们，并且只在您打算

时更新它们。

＆＃13;

＆＃13;

const lists = [{
  name: 'peter',
  value: false,
  datetime: (new Date()).toString()
},
{
  name: 'john',
  value: true,
  datetime: (new Date()).toString()
}];

const showData = () => {
  const datetime = new Date();
  const dt = datetime + '';
  const list_false = [], list_true = [];
  
  //Use a single loop to split the objects into
  //different arrays.
  lists.forEach((item) => {
    if(item.value){
      //if it's true update the time
      item.datetime = dt;
      list_true.push(item);
    } else {
      list_false.push(item);
    }
  });
  
  console.log(list_false[0].datetime);
  console.log(list_true[0].datetime);
}

const interval = setInterval(showData, 1000);

＆＃13;

＆＃13;

＆＃13;