Блог

Когда я нажимаю на кнопку в своем веб-приложении, создается новый div [contenteditable], и на нем устанавливается фокус. Это работает. Проблема в том, что если я нажму на свою кнопку несколько раз подряд очень быстро, браузер выйдет из себя и установит фокус на все созданные divs и никогда не остановится в бесконечном цикле. Как я могу предотвратить это?

 $(document).on('click', '.btn-create-div', function(e) {
    $.ajax(...).done(function(data) {
        $('#divs').prepend('<div contenteditable data-id="'   data.id   '">');
        $('#divs').find('div[data-id="'   data.id   '"]').focus();
    });
});
  

Это не бесконечный цикл, код будет выполняться столько раз, сколько вы нажали на кнопку, поэтому, если вы нажмете на нее быстро, действительно пройдет много времени, прежде чем все поймет. Что вы могли бы сделать, это отключить кнопку при нажатии, а затем включить ее обратно через x секунд, если вы хотите предотвратить это.

Когда вы нажимаете на кнопку много раз в «одно и то же время», это приведет ко многим http-запросам, а затем запросы завершатся одновременно (возможно). Наконец, для многих тегов div будет create и будет focus (поведение contenteditable будет отличаться от входного тега — я так думаю).

У меня есть 2 варианта для этой ситуации:

1. Попробуйте выполнить focus команду в «порядке». Оберните focus действие в setTimeout .

    setTimeout(function() {
       $('#divs').find('div[data-id="'   data.id   '"]').focus();
   }, 0);
     

2. Debounce нажмите действие. Пользователь может нажимать много раз, но действие щелчка не будет вызываться много раз. (Рекомендуется)

   Задержка 250 мс для каждого действия…

    $(document).on('click', '.btn-create-div', $.debounce(250, function(e) {
       $.ajax(...).done(function(data) {
          $('#divs').prepend('<div contenteditable data-id="'   data.id   '">');
          $('#divs').find('div[data-id="'   data.id   '"]').focus();
       });
   }));