如何在jQuery Mobile carousel中捕獲暫停時間？

Question

我在我的應用程序中有一個jQuery Mobile輪播，我需要在轉盤旋轉時立即填充數據，這是完成的。現在新的實現是，只要用戶在傳送帶上停留時間> = 3秒，就應該只更新下拉列表。那麼我想如何捕捉這段暫停時間呢？我使用的代碼iscroll.js

有趣的部分是：

var myScroll; 
var old_page=0; 
function loaded() { 
    myScroll = new iScroll('wrapper', { 
     snap: true, 
     momentum: false, 
     hScrollbar: false, 
     onScrollEnd: function(){ 
      var currPage = myScroll.currPageX+1; 
      var firstPage = parseInt(document.querySelector('#indicator > li:first-child').innerHTML); 
      var lastPage = parseInt(document.querySelector('#indicator > li:last-child').innerHTML); 
      if(currPage <= lastPage && currPage >= firstPage){ 
       if(old_page < currPage){ 
        document.querySelector('#indicator > li.active').className = ''; 
        document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active'; 
        document.getElementById("prev").style.visibility="visible"; 
       } 
       else if(old_page > currPage){ 
        document.querySelector('#indicator > li.active').className = ''; 
        document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active'; 
        document.getElementById("next").style.visibility="visible"; 
       } 
       old_page = currPage; 
       if(old_page == lastPage){ 
        document.getElementById("next").style.visibility="hidden"; 
       } 
       else if(old_page == firstPage){ 
        document.getElementById("prev").style.visibility="hidden"; 
       } 
      } 
      else{ 
       myScroll.scrollToPage(lastPage-1,0); 
      } 
     } 
    }); 
} 

function gotoNextPage(){ 
    if(document.getElementById("prev").style.visibility == "hidden"){ 
     document.getElementById("prev").style.visibility="visible"; 
    } 
    var currPage = parseInt(document.querySelector('#indicator > li.active').innerHTML); 
    var lastPage = parseInt(document.querySelector('#indicator > li:last-child').innerHTML); 

    if(currPage == (lastPage-1)){ 
     document.getElementById("next").style.visibility="hidden"; 
    } 
    document.querySelector('#indicator > li.active').className = ''; 
    document.querySelector('#indicator > li:nth-child(' + (currPage+1) + ')').className = 'active'; 
    myScroll.scrollToPage('next', 750); 
} 

function gotoPrevPage(){ 
    if(document.getElementById("next").style.visibility == "hidden"){ 
     document.getElementById("next").style.visibility="visible"; 
    } 
    var currPage = parseInt(document.querySelector('#indicator > li.active').innerHTML); 
    var firstPage = parseInt(document.querySelector('#indicator > li:first-child').innerHTML); 
    if((currPage-1) == firstPage){ 
     document.getElementById("prev").style.visibility="hidden"; 
    } 
    document.querySelector('#indicator > li.active').className = ''; 
    document.querySelector('#indicator > li:nth-child(' + (currPage-1) + ')').className = 'active'; 
    myScroll.scrollToPage('prev', 750); 
} 

document.addEventListener('DOMContentLoaded', loaded, false); 

Answer 1

整理並添加額外的功能，我得到這樣的：

function loaded() { 
    var $$ = document.querySelector; 
    var firstPage = parseInt($$('#indicator > li:first-child').innerHTML, 10); 
    var lastPage = parseInt($$('#indicator > li:last-child').innerHTML, 10); 
    var myScroll = new iScroll('wrapper', { 
     snap: true, 
     momentum: false, 
     hScrollbar: false, 
     onScrollEnd: function() { 
      var currPage = myScroll.currPageX + 1; 
      if(currPage <= lastPage && currPage >= firstPage) { 
       $$('#indicator > li.active').className = ''; 
       $$('#indicator > li:nth-child(' + currPage + ')').className = 'active'; 
       document.getElementById("prev").style.visibility = (currPage == firstPage) ? "hidden" : "visible"; 
       document.getElementById("next").style.visibility = (currPage == lastPage) ? "hidden" : "visible"; 
      } 
      else { 
       myScroll.scrollToPage(lastPage-1,0); 
      } 
     } 
    }); 
    var hoverTimeout; 
    var wrapper = document.getElementById('wrapper'); 
    var items = wrapper.getElementsByTagName("???"); 
    for(var i=0; i<items.length; i++) { 
     var item = items[i]; 
     item.onmouseover = function() { 
      var that = this; 
      hoverTimeout = setTimeout(function() { 
       updateDropdown(that);//adjust this statement to call existing function 
      }, 3000); 
     }; 
     item.onmouseout = function() { 
      clearTimeout(hoverTimeout); 
     }; 
    } 
} 

得到它的工作，你需要於：

在 var items = ...聲明
• ，改變???到其中的標籤名e包裝中的滾動元素（例如'img'）。
• 在setTimeout(...)語句中，調用某個更新下拉列表的現有函數。

編輯

在jQuery中這將是這樣的：

$(function() { 
    var $wrapper = $('#wrapper'), 
     $indicatorElements = $('#indicator li'), 
     $prev = $("#prev"), 
     $next = $("#next"), 
     hoverTimeout; 
    var myScroll = new iScroll('wrapper', { 
     snap: true, 
     momentum: false, 
     hScrollbar: false, 
     onScrollEnd: function() { 
      var currPage = this.currPageX; 
      if(currPage <= ($indicatorElements.length-1) && currPage >= 0) { 
       $indicatorElements.removeClass('active').eq(currPage).addClass('active'); 
       $prev.css('visibility', (currPage == 0) ? "hidden" : "visible"); 
       $next.css('visibility', (currPage == ($indicatorElements.length-1)) ? "hidden" : "visible"); 
      } 
      else { 
       this.scrollToPage($indicatorElements.length-1, 0); 
      } 
     } 
    }); 
    $wrapper.find("img").each(function(i, item) { 
     $(item).hover(function() { 
      hoverTimeout = setTimeout(function() { 
       updateDropdown(item);//adjust this statement to call existing function 
      }, 3000); 
     }, function() { 
      clearTimeout(hoverTimeout); 
     }; 
    }); 
}); 

兩個版本未經測試，可能需要調試。