jQuery在视口中运行一次.one() [英] jquery run once .one() in viewport

问题描述

我正在制作一个进度条，希望它在视口中播放.我已经开始工作了，但是代码现在每次都执行，并且我只需要运行一次即可.因为它现在创建了多个进度栏. ;-) 以下代码在Joomla扩展程序中使用.

I am making a progressbar and want it to play when it is in viewport. I got this working but the code is now executed every time and I need it to run only once. Because it creates now multiple progressbars. ;-) The code below is used in a Joomla Extension.

(function ($) {
  $(document).ready(function() {
    // Function that checks if it is in view.
    $("<?php echo '#progress' . $module->id ?>").waypoint(function() {
      // Function that makes sure it only runs once.
      // -----------I need to use .one() here but how?
       // The location of the progressbar code for now lets put a alert in.
       alert("run only once");
    }, {
      offset: '50%'
    });
  });
})(jQuery);

我一直在这里阅读有关.one()函数以及如何使用它的信息.但是我尝试了使用click和ready的示例，而单击不是我想要的，但是准备应该可以解决问题，但没有任何效果.

I have been reading up about the .one() function and how to use it in here. But I tried the examples that uses click and ready while click is not what I want but ready should do the trick but nothing worked.

推荐答案

您可以将$.Callbacks()与"once"用作参数.

(function ($) {
  $(document).ready(function() {

    function runOnce() {
      // Function that makes sure it only runs once.
      // -----------I need to use .one() here but how?
       // The location of the progressbar code for now lets put a alert in.
       alert("run only once");
    }

    var callbacks = $.Callbacks("once");

    callbacks.add(runOnce);
    // Function that checks if it is in view.
    $("<?php echo '#progress' . $module->id ?>").waypoint(function() {
      callbacks.fire(runOnce);
    }, {
      offset: '50%'
    });
  });
})(jQuery);

这篇关于jQuery在视口中运行一次.one()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！