Question

这段代码出了什么问题？

setInterval()并未停止。这是一个无限循环。

以下是视图的代码。

var chat = require('core/chat');
var Backbone = require('backbone');
var $ = require('jquery');
var agentOfferTemplate = require('hbs!templates/agent-offer');
var contador = 20;
var intervalID;

AgentOfferView = Backbone.View.extend({


    template : agentOfferTemplate,


    initialize : function() {
        this.timeAccept();
    }, 


    render : function() {
            this.$el.append(this.template(this.model.toJSON()));
            return this;
        },

    timeAccept : function(){ 
        if (contador > 0){
            $('#tempo').html(contador); 
            $('#barra-interna').css('width', contador * 10);
            intervalID = setInterval(this.timeAccept, 1000);                
            contador = contador - 1;
        }
        else {
            window.clearInterval(intervalID);
            intervalID = null;
            $('#countdown-container').hide();
    contador = 20;                 
        }
    }

});

 return AgentOfferView;

Answer 1

使用setTimeout或setInterval调用函数时，this关键字将丢失其引用（在新的上下文中调用该函数）。一般来说，this将引用null（在严格模式下）或全局对象有关更多详细信息，请阅读MDN上标题为The "this" problem的部分。基本上，您将对函数的引用传递给window.setInterval，setInterval在window函数的上下文中调用该函数，这显然是timeAccept ...因为全局对象清楚没有timeAccept : function() { if (contador > 0) { $('#tempo').html(contador); $('#barra-interna').css('width', contador * 10); intervalID = setTimeout((function(context) {//pass current this reference to closure return function() {//instead of this, use context setInterval(context.timeAccept, 1000); }; }(this)),1000); contador--; } else { clearTimeout(intervalID); intervalID = null; $('#countdown-container').hide(); contador = 20; }方法，你的timout循环只运行一次，而不是20次。就这么简单。
解决问题的最快方法是使用闭包，并将整个上下文传递给区间函数：谢天谢地，这是一个简单的解决方法：

setTimout

间隔是一次又一次地调用给定函数的东西，每个X毫秒。查看代码，您可能希望使用contador >= 0，它只调用一次该函数就目前而言，你创造了20个间隔，每个间隔每秒调用相同的功能。即使var intervalId = setInterval(function() { console.log('You\'ll see this appear every second'); console.log('This interval has an ID, and it\'s: ' + intervalId); },1000); var timeout = setTimeout(function() { console.log('This will only appear once, after 1000ms'); console.log('A timeout has an ID, too: ' + timeout); },1000); //using the ID's you can cancel both the timeout and the interval using these lines: clearInterval(intervalId); clearTimeout(timeout);//usefull if you want to cancel the delayed function call...，间隔也会继续调用函数。

考虑下面的例子：

{{1}}

Answer 2

我解决了。

timeAccept : function(){ 
        var intervalId = setInterval(
            function(){
                if (contador > 0){
                    $('#tempo').html(contador); 
                    $('#barra-interna').css('width', contador * 10);
                    contador--;
                }else{
                    clearInterval(intervalId);
                    $('#countdown-container').hide();
                    contador = 20;
                }
            }, 1000);
    }

这种方式很好。

clearInterval函数不能与backbone.js一起使用

2 个答案: