Javascript 做一次,然后每15秒做一次
我有以下代码:Javascript 做一次,然后每15秒做一次,javascript,reactjs,Javascript,Reactjs,我有以下代码: var Panel = React.createClass({ getInitialState: function () { return { user_id: null, blogs: null, error: false, error_code: '', error_code: '' }; }, shouldComponentUpdate: function(nextProps, ne
var Panel = React.createClass({
getInitialState: function () {
return {
user_id: null,
blogs: null,
error: false,
error_code: '',
error_code: ''
};
},
shouldComponentUpdate: function(nextProps, nextState) {
if (nextState.error !== this.state.error ||
nextState.blogs !== this.state.blogs ||
nextState.error_code !== this.state.error_code
) {
return true;
}
},
componentDidMount: function() {
var self = this;
var pollingInterval = setInterval(function() {
$.get(self.props.source, function(result) {
if (self.isMounted()) {
self.setState({
error: false,
error_code: '',
error_message: '',
blogs: result.user.blogs,
user_id: result.user.id
});
}
}.bind(self)).fail(function(response) {
self.setState({
error: true,
error_code: response.status,
error_message: response.statusText
});
}.bind(self));
}, 1000);
},
render: function() { ... }
});
重点关注的重要部分是componentDidMount
这将每秒获取一次,无论是否有错误。如果出现错误,渲染函数将显示相应的方法。因此,出于所有目的,这段代码完全按照我的要求执行,它会获取,如果失败,它会再次获取,直到成功
但我需要做一些改变,这就是我迷失的地方。我想说:取一次,通过或失败-这没关系。然后,在初始提取后每15秒重试一次-无论通过与否
我通常会启动一个主干收集和路由器以及一个轮询助手来完成所有这一切,但在这种特定情况下,不需要额外的开销。这就是我被难倒的地方如何实现我试图实现的目标?您应该能够稍微重构代码,以便能够以几种不同的方式调用轮询函数(例如手动调用,然后以指定的间隔调用):
你不能添加一个方法,在挂载之后,每15秒调用一次吗?只需将
setInterval
主体中的代码移动到函数中,然后在componentDidMount
中启动它。然后重复。您可能希望检查ismount()
。我在想,但我不知道这是否可行,因为我相信componentDidMount只在渲染后调用一次?除非我是个笨蛋?(我不确定吸毒习惯…:-)。是,componentDidMount
仅执行一次:。所以,你可以从那里开始。卸载组件时,您可能希望禁用计时器。此答案不再是最新的,因为isMounted
现在已被删除:警告:isMounted(…)在普通JavaScript类中不推荐使用。相反,请确保清除componentWillUnmount中的订阅和挂起的请求,以防止内存泄漏。
有人有使用react钩子的解决方案吗?
componentDidMount: function() {
this.startPolling();
},
componentWillUnmount: function() {
if (this._timer) {
clearInterval(this._timer);
this._timer = null;
}
},
startPolling: function() {
var self = this;
setTimeout(function() {
if (!self.isMounted()) { return; } // abandon
self.poll(); // do it once and then start it up ...
self._timer = setInterval(self.poll.bind(self), 15000);
}, 1000);
},
poll: function() {
var self = this;
$.get(self.props.source, function(result) {
if (self.isMounted()) {
self.setState({
error: false,
error_code: '',
error_message: '',
blogs: result.user.blogs,
user_id: result.user.id
});
}
}).fail(function(response) {
self.setState({
error: true,
error_code: response.status,
error_message: response.statusText
});
});
}