跳过或完成后的 IntroJS 回调函数？

Question

我正在使用 introjs 来浏览我的应用程序。我在网上和文档中搜索了很多地方，但似乎无法在任何地方找到如何运行在浏览中跳过或单击“完成”功能时的方法。我试图做到这一点，以便存储 cookie，并且在用户请求它或新用户访问该站点之前，不会再次运行游览。任何帮助都会很棒，谢谢！

$(function(){
    var introguide = introJs();

    introguide.setOptions({
        showProgress: true,
        steps: [
            { hidden }
        ]
    });  

    introguide.start();
});

Answer 1

是的，有一种方法，但有一些注意事项。

首先，在加载 intro.js 后，您将拥有一个名为 introJs 的全局变量和属性 fn（标准 jquery 插件方法） .

通过使用 introJS.fn 下的 oncomplete() 函数设置函数，您可以在用户点击 'Done' 按钮时执行一些操作。

这是一个仅显示控制台消息的示例：

introJs.fn.oncomplete(function() { console.log("Finished"); });

这按预期工作。在包含 intro.js 库后，您可以随时将其放入脚本中。

但是，'skip' 按钮功能只会在您处于最后一步时调用 'oncomplete' 处理程序。代码的作者认为该代码不完整，因此运行您可以从代码摘录中看到该代码：

  skipTooltipButton.onclick = function() {
    if (self._introItems.length - 1 == self._currentStep && typeof (self._introCompleteCallback) === 'function') {
      self._introCompleteCallback.call(self);
    }

    _exitIntro.call(self, self._targetElement);
  };

这基本上是说它必须在最后一步才能考虑调用完整的回调。

当然，你可以fork代码，解除限制。我建议，如果您打算这样做，请以类似于 _introlCompleteCallback 的方式创建一个 _introSkipCallback 并调用它，除非在最后一步您可以调用这两个函数（如果存在）。

希望这对您有所帮助。

Answer 2

我正要添加评论，但我的代表太低了。我不想回答，因为我还没有真正测试过这个，但是在 2.5.0 版本（可能也是以前的版本）中，有 onexit 函数，我认为它应该处理中断以及最后点击完成。你试过了吗？

Answer 3

我注意到当您单击完成按钮（跳过到最后一步）时将调用 onexit。 onexit 似乎没有将其绑定到 introjs 对象，因此我能够解决在演练完成时调用 onexit 的问题，如下所示：

// during setup
introJs.oncomplete(handleOnComplete);
introJs.onexit(() => handleOnExit(introJs));

function handleOnComplete() {
  console.log(this._currentStep); // this is bound to the introJs object
}
function handleOnExit(introJs) {
  const currentStep = introJs._currentStep;
  if (currentStep < introJs._options.steps.length) {
    doSomethingOnSkip();
  }
};

Answer 4

此代码允许存储游览信息

var introguide = introJs();


window.addEventListener('load', function () {
    var doneTour = localStorage.getItem('MyTour') === 'Completed';
    if (doneTour) {
        return;
    }
    else {
        introguide.start()

        introguide.oncomplete(function () {
            localStorage.setItem('MyTour', 'Completed');
        });

        introguide.onexit(function () {
            localStorage.setItem('MyTour', 'Completed');
        });
    }
});

Answer 5

点击 'Done' 后使用 oncomplete 函数

点击 'Skip' 后使用 onexit 函数

额外功能：onchange 将记录每个步骤，这可用于在特定步骤上调用函数

document.getElementById('startButton').onclick = function() {

    // log each step
    introJs().onchange(function(targetElement) {  
      console.log(this._currentStep)
      if (this._currentStep === 3){
        stepThreeFunc()
      }
    }).start()

    // clicking 'Done'
    .oncomplete(function(){
      someFunc()
    })

    // clicking 'Skip'
    .onexit(function(){
      someOtherFunc()
    });
};

Answer 6

     if ($(".introjs-skipbutton").is(":visible")) {
    $( document ).on('click', '.introjs-skipbutton', function(event) {
        event.stopPropagation();
        event.stopImmediatePropagation();
        self.exitTourguide();
    });
}

Answer 7

我在我的应用程序中使用 introJS 工具来提供我的应用程序的导游信息。
我使用了一些函数来动态处理它。这里步骤数据以数组格式发送。

var intro = introJs(); 
intro.setOptions( { 
    'nextLabel': 'Next >', 
    'prevLabel': '< Back', 
    'tooltipPosition': 'right', 
    steps: this.stepsData, 
    showBullets: false, 
    showButtons: true, 
    exitOnOverlayClick: false, 
    keyboardNavigation: true, 
} );

希望它有助于处理跳过按钮操作。

var self = this; intro.start().onbeforechange( function() { /* skip action*/ 
    if ( $( ".introjs-skipbutton" ).is( ":visible" ) ) { 
        $( document ).on( 'click', '.introjs-skipbutton', function( event ) { 
            self.exitTourguide(); 
        }); 
    } 
});

跳过和完成操作处理。

/完成点击操作/ intro.oncomplete( function(){ if ( $( ".introjs-skipbutton" ).is( ":visible" ) ) { $( document ).on( 'click', '.introjs-skipbutton' , function( 事件 ) { event.stopPropagation(); event.stopImmediatePropagation(); self.exitTourguide(); }); } });

/* 点击 'Skip' 操作 */ intro.onexit(function(){ if ( $( ".introjs-skipbutton" ).is( ":visible" ) ) { $( document ).on( 'click', '.introjs-skipbutton', function( event ) { event.stopPropagation(); event.stopImmediatePropagation(); self.exitTourguide(); }); } });

跳过或完成后的 IntroJS 回调函数？

IntroJS callback function upon skip or done?

javascript

jquery

intro.js

/* 点击 'Skip' 操作 */ intro.onexit(function(){ if ( $( ".introjs-skipbutton" ).is( ":visible" ) ) { $( document ).on( 'click', '.introjs-skipbutton', function( event ) { event.stopPropagation(); event.stopImmediatePropagation(); self.exitTourguide(); }); } });