[英]execute function when certain slide appear in reveal.js
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 我使用这个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
});
}
in HTML file I have this: 在HTML文件中我有这个:
<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 ). 这可以通过使用reveal.js状态( https://github.com/hakimel/reveal.js#states )来实现。
1) Add a unique state to the section that should trigger your method. 1)向应触发方法的部分添加唯一状态。
<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. 2)使用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 完整的工作示例: https : //gist.github.com/hakimel/cea4305a33713d4a5a7e
To answer Philippe Leefsma's question: you can use bind() to pass arguments, like so: 回答Philippe Leefsma的问题:您可以使用bind()传递参数,如下所示:
drawDiagramOnSlide.bind(
null,
slideName,
slideEl.querySelector('.diagram')
));
Assuming drawDiagramOnSlide looks like this: 假设drawDiagramOnSlide看起来像这样:
function drawDiagramOnSlide(_slideName, _diagramEl, _event) {...}
The bind call will create a function that calls drawDiagramOnSlide with the correct slide name and element (in my case, a div with class diagram inside the slide ). bind调用将创建一个函数,该函数使用正确的幻灯片名称和元素调用drawDiagramOnSlide(在我的例子中,幻灯片中包含类图的div)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.