$(this) 在自定义 jQuery 函数中不起作用

斯蒂芬·R

我使用 moment.js 和moment-duration-format plugin制作了一个 jQuery 倒数计时器。

请注意，这$('div#countdown')是在函数内部进行硬编码的。该功能按此处所示工作。但是，如果我将硬编码的引用更改为 $(this)，则它不起作用。console.log($this)返回一个空对象。

我试过在函数开始时将 $(this) 设置为一个变量，以防间隔造成范围问题，但没有区别。

令人困惑的部分是我$.fn.xxx = function之前在自定义 jQuery 函数中使用过这种确切的语法，而 $(this) 在这些函数中运行良好。关于这个特定功能的某些东西正在绊倒它。

<script>
    $.fn.countdown = function ( seconds, tFormat, stopAtZero ) {
        tFormat = (typeof tFormat !== 'undefined') ? tFormat : 'hh:mm:ss';
        stopAtZero = (typeof stopAtZero !== 'undefined') ? stopAtZero : true;
        var eventTime = Date.now() + ( seconds * 1000 );
        var diffTime = eventTime - Date.now();
        var duration = moment.duration( diffTime, 'milliseconds' );
        var interval = 0;
        var counter = setInterval(function () {
            $('div#countdown').text( moment.duration( duration.asSeconds() - ++interval, 'seconds' ).format( tFormat, { trim: false }) );
            if( stopAtZero && interval >= seconds ) clearInterval( counter );
        }, 1000);
    };

    $('div#countdown').countdown( 30*60, 'mm:ss' );
</script>

<div id="countdown"></div>

编辑：已解决。功能很好。它只需要在 Div 之后（或在文档加载之后）::headdesk::

罗里·麦克罗森

问题是因为内部函数在setTimeout()与外部函数不同的范围内运行。因此this不是您期望的那样。您需要缓存this引用。

另请注意，您可以通过向包含选项的函数提供对象来稍微改进逻辑。然后您可以使用$.extend来提供默认值。您还应该循环this以使用户能够提供一组对象来初始化插件。试试这个：

$.fn.countdown = function(options) {
  var defaults = {
    seconds: 0,
    tFormat: 'hh:mm:ss',
    stopAtZero: true,
    complete: function() {}
  };
  var settings = $.extend(defaults, options);

  $(this).each(function() {
    var $el = $(this);
    var eventTime = Date.now() + (settings.seconds * 1000);
    var diffTime = eventTime - Date.now();
    var duration = moment.duration(diffTime, 'milliseconds');
    var interval = 0;
    var counter = setInterval(function() {
      $el.text(moment.duration(duration.asSeconds() - ++interval, 'seconds').format(settings.tFormat, {
        trim: false
      }));
      if (settings.stopAtZero && interval >= settings.seconds) {
        clearInterval(counter);
        settings.complete();
      }
    }, 1000);
  });
}

$('div').countdown({
  seconds: 10,
  complete: function() {
    console.log('finished!');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/1.3.0/moment-duration-format.min.js"></script>
<div></div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。