衝突交易與setTimeout並點擊

我做了一個滑塊，但是當我點擊鏈接去完成過渡之前每個滑塊有衝突，從一邊到另一邊通常只有當我點擊後的過渡。衝突交易與setTimeout並點擊

jQuery的

var currentSlider = 0; 

$('.next').click(function(e) { 
    if (currentSlider != 1) { 
     $('.item').each(function(index, value) { 
      var currLeft = parseInt($(value).css('margin-left')); 
      var newLeft = currLeft - ($(window).innerWidth()); 
      $(value).css('margin-left', newLeft + 'px'); 
     }); 
     currentSlider += 1; 
    }; 
}); 

$('.previous').click(function(e) { 
    e.preventDefault(); 
    if (currentSlider != -2) { 
     $('.item').each(function(index, value) { 
      var currLeft = parseInt($(value).css('margin-left')); 
      var newLeft = currLeft + ($(window).innerWidth()); 
      $(value).css('margin-left', newLeft + 'px'); 

     }); 

     currentSlider -= 1; 
    }; 
}); 

function bar(clickedIndex, depth) { 
    if (currentSlider < clickedIndex) { 
     $(".next").click(); 
    } else if (currentSlider > clickedIndex) { 
     $(".previous").click(); 
    } else { 
     return; 
    } 
    setTimeout(function() { 
     bar(clickedIndex, depth + 1); 
    }, 2005); 
} 

$("#foo > li > a").click(function(e) { 
    bar($(this).data("index"), 0); 
    e.preventDefault(); 
});

來源

2014-09-30 Cristiano Matos

您如何看待所需的互動？在轉換完成之前，你排隊點擊還是忽略它們？ – Jack 2014-09-30 06:39:51

嗨，傑克，這個衝突的點擊過渡，我已經試圖阻止傳播的方式，但無法。我需要在轉換時禁用點擊。謝謝。 – 2014-09-30 06:46:11

小提琴：http://jsfiddle.net/3vv06805/9/

這裏是什麼改變了細分：

過渡期間禁用點擊

要禁用點擊，我們需要某種標誌。爲此，我只設置一個簡單的變量：

// Transition flag 
var isTransitioning = false;

在我們的點擊事件中，我們檢查該變量以確定邏輯是否應該發生。下面是更新後點擊邏輯：

$('.next').click(function(e) { 
    if (currentSlider != 1) { 
     if (transisionsSupported && !isTransitioning) { 
      isTransitioning = true; 
      $('.item').each(function(index, value) { 
       var currLeft = parseInt($(value).css('margin-left')); 
       var newLeft = currLeft - ($(window).innerWidth()); 
       $(value).css('margin-left', newLeft + 'px'); 
      }); 
      currentSlider += 1; 
     } 
    }; 
});

你會在我們的if (transitionsSupported && !isTransitioning) {塊注意到，我們檢查!isTransitioning，或者如果我們不轉變。您還會看到一個transitionsSupported檢查，這是我添加的幫助函數。

// Helper function to determine transition support 
var transitionsSupported = (function() { 
     var doc = document.body || document.documentElement, 
      style = doc.style, 
      vendors = ['webkit', 'Webkit', 'Moz', 'Khtml', 'O', 'ms'], 
      i; 
     // Test for standard prop 
     if (typeof style.transition === 'string') { 
      return true; 
     } 
     // Tests for vendor specific prop 
     for (i = 0; i < vendors.length; i++) { 
      if (typeof style[vendors[i] + 'Transition'] === 'string') { 
       return true; 
      } 
     } 
     return false; 
    }());

這是一個只能運行一次的自執行函數。

回到我們的點擊事件，我們會看到我們將isTransitioning變量設置爲true。我們在哪裏設置回false？在transitionEnd事件！

TransitionEnd事件

// Transition end listener, reset flag 
if (transisionsSupported) { 
    $('.container').on('webkitTransitionEnd oTransitionEnd otransitionend transitionend', function() { 
     isTransitioning = false; 
    }); 
}

這是真的吧！這些添加會阻止您在轉換過程中點擊下一個/上一個按鈕。但是，它也會干擾bar函數（因爲點擊被觸發），因此您可能需要查看該邏輯。

希望這會有所幫助！

來源

2014-09-30 20:22:59 Jack

衝突交易與setTimeout並點擊

回答

相關問題