如何在jquery回调中更改'this'

我写了一个jQuery插件，它在div中获取一个数字，然后使其数起来。我试图添加一个回调，所以当它完成后，然后开始下一个div。如何在jquery回调中更改'this'

当它开始在下一个div上工作时，它首先重置当前div中的数字，然后按照预期继续进行下一个div。我怀疑它与插件内部的'this'有关。

Here is a full (not) working example -->

如何防止这种情况的发生？由于

我的插件：

(function($) { 
$.fn.countUp = function(options) { 

    var settings = $.extend({ 
     'startFrom'  : 0, 
     'countTo'  : Number(this.text()), 
     'start'   : 10, 
     'frequency'  : 200, 
     'jump'   : 1, 
     'target'  : this, 
     'log'   : false, 
     'callback'  : '' 
    }, options); 

    var intRegex = /^\d+$/; 
    if(intRegex.test(settings.countTo) && intRegex.test(settings.startFrom)) { 
     // Both settings are integers, get started: 
     if(settings.startFrom<settings.countTo){ 
      offset = settings.jump; 
     }else{ 
      offset = -1 * settings.jump; 
     } 
     current_number = settings.startFrom; 
     settings.target.html(current_number); 

     checkNumber(); 
     var timer; 
     function checkNumber(){ 
      if(offset<0){ 
       if(current_number <= settings.countTo) 
       { 
        current_number = settings.counTo; 
        clearTimeout(timer); 
        if (typeof settings.callback == 'function') { // make sure the callback is a function 
         settings.callback.call(this); // brings the scope to the callback 
        } 
       } 
       else 
       { 
        current_number += offset; 
        timer=setTimeout(function(){checkNumber()},settings.frequency); 
       } 
      }else{ 
       if(current_number >= settings.countTo) 
       { 
        current_number = settings.counTo; 
        clearTimeout(timer); 
        if (typeof settings.callback == 'function') { // make sure the callback is a function 
         settings.callback.call(this); // brings the scope to the callback 
        } 
       } 
       else 
       { 
        current_number += offset; 
        timer=setTimeout(function(){checkNumber()},settings.frequency); 
       } 
      } 
      settings.target.html(current_number); 
      if(settings.log){console.log(settings.target.attr('id'))}; 
     } 

    }else{ 
     if(settings.log){console.log('From countUp: Please use an integer for startFrom and countTo arguments.');} 
    } 
}; 
})(jQuery);

这里是我怎样，我称之为：

$(document).ready(function(){ 
    $("#output").countUp({ 
     'log' : true, 
     'callback' : call2 
    }); 

    function call2(){ 
     $("#output2").countUp({ 
      'log' : true, 
      'callback' : call3 
     }); 
    } 

    function call3(){ 
     $("#output3").countUp({'log' : true}); 
    } 
})

来源

2013-04-08 Djave

回调函数的目的，不是简单地让你的插件再次做同样的事情。它就在那里，因此您可以在插件正在处理某些事情时完成一些临时结果，或者在完成异步任务后处理这些结果。要做你想做的事，你可以连续调用插件3次。但是，让我们说这是有用的，因为计数发生异步。然后，对于初学者，请尝试将回调重命名为onFinished或其他。有意义的命名将帮助你更好地理解你在做什么。 – 2013-04-08 20:39:40

另外，似乎没有必要为'settings.callback.call（this）添加一个参数;'如果我没有弄错，你可以'settings.callback（）'。 – 2013-04-08 20:46:47

如果我连续三次调用插件，它们都会同时执行。我试图通过在插件中使用回调函数或onFinished函数来开始下一个动画，从而使插件一个接一个地执行。我已经做了一切建议，但onFinished函数仍然干扰以前的div http://codepen.io/sheepysheep60/pen/jxudC – Djave 2013-04-08 20:53:56

某些变量正在从设置创建的，但它们并没有被清除。通过添加这些变量中的每一个的var infront，范围将停留在该函数内并解决问题。

(function($) { 
$.fn.countUp = function(options) { 

var settings = $.extend({ 
    'startFrom'  : 0, 
    'countTo'  : Number(this.text()), 
    'start'   : 10, 
    'frequency'  : 200, 
    'jump'   : 1, 
    'target'  : this, 
    'log'   : false, 
    'callback'  : '' 
}, options); 

var intRegex = /^\d+$/; 
if(intRegex.test(settings.countTo) && intRegex.test(settings.startFrom)) { 
    // Both settings are integers, get started: 
    if(settings.startFrom<settings.countTo){ 
     offset = settings.jump; 
    }else{ 
     offset = -1 * settings.jump; 
    } 
    current_number = settings.startFrom; 
    settings.target.html(current_number); 

    checkNumber(); 
    var timer; 
    function checkNumber(){ 
     if(offset<0){ 
      if(current_number <= settings.countTo) 
      { 
       current_number = settings.counTo; 
       clearTimeout(timer); 
       if (typeof settings.callback == 'function') { // make sure the callback is a function 
        settings.callback.call(this); // brings the scope to the callback 
       } 
      } 
      else 
      { 
       current_number += offset; 
       timer=setTimeout(function(){checkNumber()},settings.frequency); 
      } 
     }else{ 
      if(current_number >= settings.countTo) 
      { 
       current_number = settings.counTo; 
       clearTimeout(timer); 
       if (typeof settings.callback == 'function') { // make sure the callback is a function 
        settings.callback.call(this); // brings the scope to the callback 
       } 
      } 
      else 
      { 
       current_number += offset; 
       timer=setTimeout(function(){checkNumber()},settings.frequency); 
      } 
     } 
     settings.target.html(current_number); 
     if(settings.log){console.log(settings.target.attr('id'))}; 
    } 

}else{ 
    if(settings.log){console.log('From countUp: Please use an integer for startFrom and countTo arguments.');} 
} 
}; 
    })(jQuery);

来源

2013-04-08 22:44:45 Djave

设置为this

var $this = this;

范围之外创建一个变量将解决这个问题，如果我正确地阅读问题。 this将被功能范围覆盖。

UPDATE

仅供参考，有一个在您的代码一个错字：

current_number = settings.counTo;

我认为它应该是settings.countTo？

编辑的代码

(function($) { 
$.fn.countUp = function(options) { 

    var $this = this; 

    var settings = $.extend({ 
     'startFrom'  : 0, 
     'countTo'  : Number($this.text()), 
     'start'   : 10, 
     'frequency'  : 200, 
     'jump'   : 1, 
     'target'  : $this, 
     'log'   : false, 
     'callback'  : '' 
    }, options); 

    var intRegex = /^\d+$/; 
    if(intRegex.test(settings.countTo) && intRegex.test(settings.startFrom)) { 
     // Both settings are integers, get started: 
     if(settings.startFrom<settings.countTo){ 
      offset = settings.jump; 
     }else{ 
      offset = -1 * settings.jump; 
     } 
     current_number = settings.startFrom; 
     settings.target.html(current_number); 

     checkNumber(); 
     var timer; 
     function checkNumber(){ 
      if(offset<0){ 
       if(current_number <= settings.countTo) 
       { 
        current_number = settings.counTo; 
        clearTimeout(timer); 
        if (typeof settings.callback == 'function') { // make sure the callback is a function 
         settings.callback.call($this); // brings the scope to the callback 
        } 
       } 
       else 
       { 
        current_number += offset; 
        timer=setTimeout(function(){checkNumber()},settings.frequency); 
       } 
      }else{ 
       if(current_number >= settings.countTo) 
       { 
        current_number = settings.counTo; 
        clearTimeout(timer); 
        if (typeof settings.callback == 'function') { // make sure the callback is a function 
         settings.callback.call($this); // brings the scope to the callback 
        } 
       } 
       else 
       { 
        current_number += offset; 
        timer=setTimeout(function(){checkNumber()},settings.frequency); 
       } 
      } 
      settings.target.html(current_number); 
      if(settings.log){console.log(settings.target.attr('id'))}; 
     } 

    }else{ 
     if(settings.log){console.log('From countUp: Please use an integer for startFrom and countTo arguments.');} 
    } 
}; 
})(jQuery);

来源

2013-04-08 20:25:10

如果我错了，请原谅我，但是这不是什么“目标”：这，“在做什么？谢谢 – Djave 2013-04-08 20:28:10

我想我不确定你的插件的目标是什么。你能澄清吗？ – 2013-04-08 20:32:49

感谢您的帮助。如果你看看我提供的链接，它只是计数从0到div中的数字。然后当它到达那个数字时，从0开始计数下一个div。所提供的链接应该以“10,10,10”结束，但在运行脚本时此刻结束“1,1,10” – Djave 2013-04-08 20:36:25

如何在jquery回调中更改'this'

回答

相关问题