Question

var progressbar = { 
    progress : null, 
    html : function() { 
     var loadingHtml = '<div id="loader-wrapper" class="catalog-loadmore">'; 
     loadingHtml += '<div class="progress"><div id="catalog-bar" class="progress-bar progress-bar-striped active" style="width: 10%"></div></div>'; 
     loadingHtml += '<div class=""><span id="progress-valuenow"></span>%</div>'; 
     loadingHtml += '</div>'; 
     return loadingHtml 
    }, 
    start : function() { 
     var width = 10; 
     this.progress = setInterval(function() { 
      $('#catalog-bar').css('width', width + '%'); 
      $('#progress-valuenow').text(width); 
      if(width < 98){ 
       width += 1; 
      }else{ 
       this.stop(); // this is not working 
       clearInterval(this.progress); // this is also not working 
       console.log('else') 
      } 
     }, 100); 
    }, 
    stop : function() { 
     clearInterval(this.progress); 
    }, 
    destroy : function() { 
     clearInterval(this.progress); 
     $('#loader-wrapper').remove(); 

    } 
} 

В приведенном выше коде, поэтому следующий оператор не работает условие еще выполняется console.log('else') печатает, но clearInterval() не работает. Я вызываю progressbar.destroy() извне и работает.

this.stop(); // this is not working 
clearInterval(this.progress); // this is also not working 

Может ли кто-нибудь сказать мне, что я, что я делаю неправильно.

Answer 1

Вы прошли анонимную функцию в setInterval, анонимные функции, имеет контекст this выставиться в window, так что вы ориентируетесь window.progress.

У вас есть два пути, чтобы решить вашу проблему:

• магазин this в некоторой переменной, как var _this = this; setInterval(function() { ... clearInterval(_this.progress) } ...)

• использования Function.prototype.bind(), чтобы установить контекст вашей анонимной функции как setInterval(function() { ... clearInterval(this.progress) }.bind(this) ...)

---

_{Или настроить transpiler для ES6 и использовать Arrow function, который связывает this автоматически}