当某个幻灯片出现在reveal.js中时执行函数 [英] execute function when certain slide appear in reveal.js

问题描述

我用这个javascript框架创建一个演示文稿 http://lab.hakim.se/reveal-js/#/ ，当某个幻灯片出现时，我想执行函数stats（），它每5秒显示一些API数据，但只有当这张幻灯片出现时才会显示

<$ $ {$ b $ .ajax（{
类型：GET，
url：url_survey，
dataType：json ，
成功：
函数（数据）{
//显示数据的某些代码
}，
错误：
//某些代码
}）;
}

我有这个：

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

我该怎么做？我编写了这段代码，但它始终有效，不仅在出现幻灯片时显示出来

  function check（）{
 if（ $（＃stats）。is（：visible））
 stats（）; 
} 
 
 check（）; 
 setInterval（function（）{check（）}，2000）; 
  

解决方案

这可以通过使用reveal.js状态 https://github.com/hakimel/reveal.js#states ）。

1）为应该触发您的方法的部分添加一个唯一状态。

 < section data-state =stats> 
< h2>这会触发一个名为stats的状态事件。< / h2> 
< / section> 
  

2）使用reveal.js API将侦听器添加到自定义状态。

pre $ Reveal.addEventListener（'stats'，function（）{
//每次调用幻灯片stats状态变为可见
}）;


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

I create a presentation with this javascript framework http://lab.hakim.se/reveal-js/#/ and when certain slide is appearing I want to execute function stats(), which display some data from API every 5 seconds, but only when this slide is appearing

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

in HTML file I have this:

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

how can I do it? I wrote this code, but it works always, not only when slide appear

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

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

解决方案

This can be achieved by using reveal.js states (https://github.com/hakimel/reveal.js#states).

1) Add a unique state to the section that should trigger your method.

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

2) Add a listener to your custom state using the reveal.js API.

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

Complete working example: https://gist.github.com/hakimel/cea4305a33713d4a5a7e

这篇关于当某个幻灯片出现在reveal.js中时执行函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！