当某些幻灯片出现在reveal.js中时执行函数答案

【问题标题】：execute function when certain slide appear in reveal.js当某些幻灯片出现在reveal.js中时执行函数
【发布时间】：2014-03-02 21:29:59
【问题描述】：

我用这个 javascript 框架 http://lab.hakim.se/reveal-js/#/ 创建了一个演示文稿，当某些幻灯片出现时，我想执行函数 stats()，它每 5 秒显示一次来自 API 的一些数据，但仅在此幻灯片出现时

function stats(){                
$.ajax({
    type: "GET",
    url: url_survey,
    dataType: "json",
    success : 
      function (data) {
      //some code to display data       
    },
    error:
      //some code
}); 
}

在 HTML 文件中我有这个：

<section>
<div id="stats">
</div>
</section>

我该怎么做？我写了这段代码，但它总是有效，不仅在幻灯片出现时

function check(){
if($("#stats").is(":visible"))
stats();
}

check();
setInterval(function(){check()}, 2000);

【问题讨论】：

标签： javascript html reveal.js

【解决方案1】：

这可以通过使用reveal.js 状态(https://github.com/hakimel/reveal.js#states) 来实现。

1) 向应该触发您的方法的部分添加唯一状态。

<section data-state="stats">
    <h2>This will trigger a state event with the name "stats".</h2>
</section>

2) 使用reveal.js API 为您的自定义状态添加一个监听器。

Reveal.addEventListener( 'stats', function() {
    // Called each time the slide with the "stats" state is made visible
} );

完整的工作示例：https://gist.github.com/hakimel/cea4305a33713d4a5a7e

【讨论】：

是的，但我需要在 HTML 中有这个：
...还有其他解决方案如何使它外部js文件@hakim
酷，是否可以将参数传递给事件处理函数？谢谢
@Felipe 我不确定这是否是最好的解决方案，但使用数据集，您可以在幻灯片中添加类似data-your-data="42" 的内容，然后在回调函数中使用Reveal.getCurrentSlide().dataset.pluginPage 访问它。

【解决方案2】：

回答 Philippe Leefsma 的问题：您可以使用 bind() 传递参数，如下所示：

drawDiagramOnSlide.bind(
    null,
    slideName,
    slideEl.querySelector('.diagram')
));

假设 drawDiagramOnSlide 看起来像这样：

function drawDiagramOnSlide(_slideName, _diagramEl, _event) {...}

绑定调用将创建一个函数，该函数使用正确的幻灯片名称和元素调用 drawDiagramOnSlide（在我的例子中，幻灯片内带有类图的 div）。

【讨论】：