按下按鈕時如何取消暫停？

我正在創建刪除功能來刪除系統中的項目。基本上，管理員可以點擊刪除按鈕並刪除一個項目。問題出現了，因爲有些管理員感到滿意或過於熱情，因此需要撤消刪除。按下按鈕時如何取消暫停？

我建議的解決方案涉及一個撤銷按鈕，它在實際項目被刪除之前顯示20秒，類似於Gmail實驗室中的撤消發送電子郵件功能。

function deleteStuff(type,id){ 
    var element = $("#"+type+id); 
    element.slideUp(500,function(){element.html("<button class='btn undoDelete' >UNDO</button>");}); 
    var timeout = window.setTimeout(element.slideDown(),20000); 
    if($(".undoDelete").click()){ 
     clearTimeout(timeout); 
     //replace the item 
    } else { 
     //delete the item with ajax 
    } 
}

我知道你可以停止超時與stop()或clearTimeout()，但我想知道的是如何在函數中做到這一點。到目前爲止，我已經考慮過每秒查看一次，直到20秒，但我不確定這是否是最有效的方式。

請記住，可能同時多次調用此函數。

要清楚，我知道這個函數不完整（例如不會完全恢復），但這是不相關的。該函數的其餘部分只是設置超時部分的上下文。

來源

2014-01-18 Huey

那裏有幾個問題。你用jQuery對象（返回值爲element.slideUp）調用setTimeout，但你應該給它一個函數。你也永遠不會恢復按鈕（如果用戶點擊撤消），並且沒有什麼能夠真正阻止刪除的發生。

我已經採取了簡短的刺吧：

function deleteStuff(type,id){ 
    var element, timeout; 

    element = $("#"+type+id); 
    element.slideUp(500, function() { 
     // Update button and slide down *immediately* 
     element.html("<button class='btn undoDelete' >UNDO</button>") 
       .one("click", function() { 
        // Stop the delete 
        clearTimeout(timeout); 

        // Restore the button 
        // ...exercise for the reader... 
       }, 
       .slideDown(); 
    }); 
    timeout = window.setTimeout(function() { 
     // Delete item with ajax 
    }, 20000); 
}

這個工程即使有多個重疊調用的功能，所提供的id值是不同的，因爲每次調用都有自己的timeout變量。

然而，如果用戶刪除的東西，然後導航離開該頁面？我對用戶的期望是該東西會被刪除，但是你的刪除代碼永遠不會運行。

相反，我建議立即將信息發送到服務器，如果用戶取消發送是到服務器。服務器將負責在實際刪除之前等待20秒。近僞代碼：

function deleteStuff(type,id){ 
    var element, timeout; 

    // Send "pending delete" to server 
    // ... 

    // Update button 
    element = $("#"+type+id); 
    element.slideUp(500, function() { 
     element.html("<button class='btn undoDelete' >UNDO</button>") 
       .one("click", function() { 
        // Cancel timer 
        clearTimeout(timeout); 

        // Send "cancel delete" to server 
        // ... 

        // Restore the button 
        // ... 
       }, 
       .slideDown(); 
    }); 
    timeout = window.setTimeout(function() { 
     // Remove or restore the button 
     // ... 
    }, 20000); 
}

來源

2014-01-18 07:16:28

您在底部添加的好點。我從來沒想過這點。最完整和有用的答案。謝謝！ – Huey

Javascript是單線程的，你不能「等待」一個事件。你必須在事件處理程序中做你想做的事情。

function deleteStuff(type,id){ 
    var element = $("#"+type+id); 
    timeout = window.setTimeout(function() { element.slideDown() },20000); 
    element.slideUp(500,function(){element.html("<button class='btn undoDelete' data-timeout='"+timeout+"'>UNDO</button>");}); 
} 
$(document).on("click", ".undoDelete", function() { 
    clearTimeout($(this).data('timeout')); 
});

您需要使用事件代表團.on()因爲這是結合動態創建的元素。

來源

2014-01-18 07:16:12 Barmar

按下按鈕時如何取消暫停？

回答

相關問題