javascript - onValueChange 不断充斥我的套接字服务器

Question

我有一个带有从 0 到 100% 的 slider 的 React native 应用程序。每次用户触摸此 slider 时，都会触发 onValueChange，通过套接字将更改后的值发送到服务器。

这是代码

       <Slider  
             step={1}
             minimumValue={0}
             maximumValue={100}
             value={this.state.value}
             onValueChange={val => {
               this.setState({ whiteValue: val })
               socket.emit('channel', val)
              }
            }
       />

问题是每次用户触摸 slider 时(即使他没有修改值)，onValueChange 都会像每 0.3 秒一样被触发。

因为我希望通过套接字将更改后的值发送到我的服务器，服务器被值淹没并且无法足够快地处理它们。

“降低”发射率的最佳方法是什么？

感谢任何帮助。

Answer 1

您可能需要引用 https://github.com/facebook/react/issues/2454 , debouncing 正是你所需要的，但你可能需要自己实现它。我很可能会做这样的事情:

       <Slider  
             step={1}
             minimumValue={0}
             maximumValue={100}
             value={this.state.value}
             onValueChange={val => {
               if (this.oldVal === val) return;
               else {
                   this.oldVal = val;
                   this.setState({ whiteValue: val })
                   socket.emit('channel', val)
               }               
              }
            }
       />