jquery更改css太遲？

我有一些代碼：經過「確認」jquery更改css太遲？

$(document).on('click', '.delete',function(e){ 
    e.preventDefault(); 
    $('.selector').css({'color':'#cc0000'}); 
    if(confirm('Do you want to remove')){ 
     $.ajax({ 
      ... 
     }); 
    } 
    else{ 
     // $('.selector').css('color',''); 
    } 
});

但CSS改變顏色。「確認」之前它如何顯示紅色？

來源

2017-04-25 Laravelchik

爲什麼這麼在意？如果您使用的是對話框，那麼用戶應該關注對話框，而不是頁面上他們無法與之交互的內容。特別是如果你只是在他們儘快關閉對話框時將它改回 – musefan

我想向用戶展示他將要刪除的內容。 – Laravelchik

但是，您甚至無法確定該元素在屏幕上對用戶而言是否可見。如果你想要一個不錯的UX，那麼你可能不應該首先使用內置的確認對話框 – musefan

問題是因爲confirm()是阻止瀏覽器的UI線程更新的模態調用。要解決這個問題，你可以把confirm()放在setTimeout()中，延遲很短。另外請注意，除非沒有其他選擇，否則應避免使用css()。改爲應用類。試試這個：

$(document).on('click', '.delete',function(e){ 
    e.preventDefault(); 
    $('.selector').addClass('active'); 

    setTimeout(function() { 
    if (confirm('Do you want to remove')) { 
     $.ajax({ 
     // ... 
     }); 
    } 
    else { 
     $('.selector').removeClass('active'); 
    } 
    }, 25); 
});

.active { color: #C00; }

來源

2017-04-25 09:50:12

是的，它的工作原理。但它可以有很少的時間和CSS不顯示？或者它總是工作？ – Laravelchik

我不確定你的意思，但如果需要，你可以降低延遲。減少'25'的數字。這是執行前超時等待的毫秒數。 –

我的意思是25毫秒可以沒有足夠的時間？在這種情況下，它應該增加持續時間。或者它總是工作？ – Laravelchik

你需要使用一個回調函數。可悲的是css()不支持這一點。但是，您可以使用animate()，時間爲0秒。

$(this).animate({CSS-PARAMETERS},0,function(){ 
     if(confirm(...)){ 
     ... 
     } 
    });

來源

2017-04-25 09:50:26

好的，謝謝你的回答 – Laravelchik

檢查：

$(document).on('click', '.delete',function(e){ 
    e.preventDefault(); 
    $('.selector').css({'color':'#cc0000'}); 

    window.setTimeout(function() 
    { 
     if(confirm('Do you want to remove')){ 
      $.ajax({ 
       ... 
      }); 
     } 
     else{ 
      // $('.selector').css('color',''); 
     } 
    } 
    , 500); 

});

來源

2017-04-25 09:51:48

更改值500爲您的需求。 –

謝謝。是的，它的工作原理。 – Laravelchik

我建議setTimeout

$(document).on('click', '.delete',function(e){ 
 
    e.preventDefault(); 
 
    $('.selector').css({'color':'#cc0000'}); 
 
    
 
    setTimeout(function(){ 
 
     if(confirm('Do you want to remove')){ 
 

 
     } 
 
    }, 100); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="delete selector">Delete?</div>

來源

2017-04-25 09:51:57 Sojtin

謝謝。是的，它的工作原理。 – Laravelchik

jquery更改css太遲？

回答

相關問題