javascript - Jquery .keyup、.keypress 和 .keydown : problems with timing (and advices on refactoring the code)

Question

我构建了一个表单，用户可以在其中设置 iframe 的宽度和高度，然后使用这些值构建要嵌入网页上的字符串。

这个想法是，一旦用户填写了输入，字符串就会自动使用新插入的值进行更新。

但似乎字符串更新不及时:它似乎丢失了最后一个“按键”。

这是我写的代码

    $( document ).ready(function() {
    
        $('iframe#WidgetContent').width(300);
    
        // Get the value of the input width box
        $( 'form #WidgetConfigurator_width' ).keyup(function() {
    
            var width=parseInt( $(this).val());
    
            if ( width < 180 ) {
                width = 180;
            }
    
            if ( width > 500 ) {
                width = 500;
            }
    
            $('iframe#WidgetContent').width(width);
    
            getEmbeddableCode();
        });
    });
    
    $( document ).ready(function() {
    
        $('iframe#WidgetContent').height(500);
    
        // Get the value of the input width box
        $( 'form #WidgetConfigurator_height' ).keypress(function() {
    
            var height=parseInt( $(this).val());
    
            if ( height < 70 ) {
                height = 70;
            }
    
            $('iframe#WidgetContent').height(height);
    
            getEmbeddableCode();
        });
    });
    
    $( document ).ready(function() {
        window.getEmbeddableCode = function() {
            var iframe     = $('iframe#WidgetContent');
            var height     = iframe.height();
            var width      = iframe.width();
            var host       = $(location).attr('protocol') + '//' + $(location).attr('hostname');
    
            var code = '<iframe id="WidgetContent" src="http://127.0.0.1:8000/widget/1/" frameborder="0" height="' + height + '" width="' + width + '"></iframe>';
    
            $('#getEmbeddableCode').html(code);
        };
    });
    
    $( document ).ready(function() {
        if ( '' === $( '#getEmbeddableCode' ).val() ) {
            getEmbeddableCode();
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="WidgetConfigurator" method="post" id="WidgetConfigurator">
    <div class="form-group">
        <label for="WidgetConfigurator_width">Width widget</label>
        <input type="text" id="WidgetConfigurator_width" name="WidgetConfigurator[width]" class="form-control" placeholder="Da un minimo 180 a un massimo di 500">
    </div>
    <div class="form-group">
        <label for="WidgetConfigurator_height">Height widget</label>
        <input type="text" id="WidgetConfigurator_height" name="WidgetConfigurator[height]" class="form-control" placeholder="Minimo 70">
    </div>
    <div class="form-group">
        <label for="getEmbeddableCode">Clicca e il codice si copierà automaticamente</label>
        <textarea id="getEmbeddableCode" class="form-control" rows="5"></textarea>
    </div>
</form>

<iframe id="WidgetContent" src="http://127.0.0.1:8000/widget/1" frameborder="0"></iframe>

无论如何，问题是，如果我在 Width input 中写入 200，则文本区域中的值永远不会是 200，而是其他值(有时是 192，其他时候是 180，其他时候另一个值:它似乎是一个随机数)。一旦我开始在高度输入中写入值，正确的值将从宽度值中获取，但高度值同时发生同样的事情:它永远不是我写的值在输入中。

我认为有些东西我没有考虑计时，但是，由于这是我用 Jquery 编写的第一个脚本，我确信我遗漏了一些东西。

有什么建议吗？谢谢!

PS由于这是我第一个非常实用的 Jquery 方法，因此我还希望收到有关重构我认为现在有点困惑的代码的反馈。如果有人可以帮助我理解如何更好地构建代码，那将非常有帮助!

Answer 1

好吧，说真的，各位。我成功了;)

var width = 300;
var height = 70;

$('iframe#WidgetContent').width(width);
$('iframe#WidgetContent').height(height);

// Get the value of the input width box
$('form #WidgetConfigurator_width').change(function() {

  width = parseInt($(this).val());

  if (width < 180) {
    width = 180;
  }

  if (width > 500) {
    width = 500;
  }

  $('iframe#WidgetContent').width(width);

  getEmbeddableCode();
});


// Get the value of the input width box
$('form #WidgetConfigurator_height').change(function() {

  height = parseInt($(this).val());

  if (height < 70) {
    height = 70;
  }

  $('iframe#WidgetContent').height(height);

  getEmbeddableCode();
});

window.getEmbeddableCode = function() {
  var iframe = $('iframe#WidgetContent');
  var host = $(location).attr('protocol') + '//' + $(location).attr('hostname');

  var code = '<iframe id="WidgetContent" src="http://127.0.0.1:8000/widget/1/" frameborder="0" height="' + height + '" width="' + width + '"></iframe>';

  $('#getEmbeddableCode').html(code);

};

if ('' === $('#getEmbeddableCode').val()) {
  getEmbeddableCode();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="WidgetConfigurator" method="post" id="WidgetConfigurator">
  <div class="form-group">
    <label for="WidgetConfigurator_width">Width widget</label>
    <input type="text" id="WidgetConfigurator_width" name="WidgetConfigurator[width]" class="form-control" placeholder="Da un minimo 180 a un massimo di 500">
  </div>
  <div class="form-group">
    <label for="WidgetConfigurator_height">Height widget</label>
    <input type="text" id="WidgetConfigurator_height" name="WidgetConfigurator[height]" class="form-control" placeholder="Minimo 70">
  </div>
  <div class="form-group">
    <label for="getEmbeddableCode">Clicca e il codice si copierà automaticamente</label>
    <textarea id="getEmbeddableCode" class="form-control" rows="5"></textarea>
  </div>
</form>

<iframe id="WidgetContent" src="http://127.0.0.1:8000/widget/1" frameborder="0"></iframe>