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

Question

我正在使用introjs来构建我的应用程序之旅.我已经在网上和文档中搜索了很多地方,但似乎无法找到如何在浏览中跳过或点击完成后运行函数的方法.我正在尝试制作一个cookie,以便在用户请求或新用户访问该站点之前不再运行游览.任何帮助都会很棒,谢谢!

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

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

    introguide.start();
});

Answer 1

此代码允许存储旅游信息

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 2

是的，有办法但有一些警告。

首先，在加载intro.js之后，您将拥有一个introJs带有属性的全局调用fn（标准jquery插件方法）。

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

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

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

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

但是，如果您处于最后一步，则“跳过”按钮功能将仅调用“不完整”处理程序。该代码的作者认为该代码尚未完成，因此没有运行该代码，如您从代码摘录中看到的那样：

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

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

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

当然，您可以分叉代码并删除限制。我建议您是否要执行此操作，以类似于_introlCompleteCallback的方式创建_introSkipCallback并调用它，除非在最后一步中可以调用这两个函数（如果存在）。

希望这可以帮助。

Answer 3

使用oncomplete了之后“完成”功能被点击

使用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()
    });
};