Dojo框架中加载旋转图标10秒持续显示的实现问题求助

我来帮你搞定这个问题！你遇到的核心问题是setTimeout回调函数里的this指向不对——默认情况下，setTimeout的回调函数里的this会指向全局的window对象，而不是你原来的组件/对象上下文，所以this.domNode根本找不到对应的元素，代码自然没生效。

下面给你几种可行的解决方案：

方案1：保存上下文到变量 #

把当前的this存到一个变量里（比如self或者that），然后在回调里用这个变量访问domNode：

// 保存当前this上下文
const self = this;
setTimeout(function(){ 
  self.domNode.classList.add('widget-loading');
}, 10000);

方案2：使用箭头函数 #

箭头函数不会绑定自己的this，它会继承外层作用域的this，这样就能正确访问到this.domNode了：

setTimeout(() => {
  this.domNode.classList.add('widget-loading');
}, 10000);

方案3：用bind绑定this #

通过bind()方法把回调函数的this绑定到当前上下文：

setTimeout(function(){ 
  this.domNode.classList.add('widget-loading');
}.bind(this), 10000);

额外补充：如果你的需求是「显示图标10秒后自动隐藏」 #

如果你的实际需求是让加载图标先显示出来，持续10秒后再消失，那可以这样写：

// 立即显示加载图标
this.domNode.classList.add('widget-loading');
// 10秒后移除类名，隐藏图标
setTimeout(() => {
  this.domNode.classList.remove('widget-loading');
}, 10000);

内容的提问来源于stack exchange，提问作者Kousthubha