在确认jquery之前执行功能

Question

这是我的 jquery 代码

$('.input').keyup(function(event){
    update_text(); // $('div').html('blahblah');
})
.blur(function(event){
    $(this).keyup();
    if(confirm('Are you sure?')){
        // do somthing...
    }
});

我的问题是输入模糊时，确认框应该在执行 update_text() 后显示；

但 update_text() 似乎在确认后运行...

如何让它先做update_text()，然后显示确认对话框？

Answer 1

实际上您的方法确实在confirm() 之前运行，这里的问题是您的浏览器异步重绘DOM，即使方法.html() 本身是同步的。因此，虽然它看起来并没有首先在视觉上运行，但它确实是。

例如，更简单的版本将具有相同的功能，这可能因浏览器而异：

$("div").html("foo");
confirm('Are you sure?');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

解决此问题的一种方法是force the DOM to repaint，而不是让浏览器这样做。例如：

$("div").html("foo");
$("div").hide().show(function(){
  confirm('Are you sure?'); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

Answer 2

这可能太简单了，但似乎解决了问题。

$('.input').keyup(function(event){
  update_text(); // $('div').html('blahblah');
})
$('.input').blur(function(event){
  update_text();
  if(confirm('Are you sure?')){
    // do somthing...
  }
});

Answer 3

update_text() 发生在keyup 事件上，该事件在输入模糊之前触发，因此如果设置正确，它实际上会在每次用户输入另一个字符时发生。

$('.input').keyup(function(event){
    update_text(); // $('div').html('blahblah');
})
.blur(function(event){
    $(this).keyup();
    if(confirm('Are you sure?')){
        // do somthing...
    }
});

update_text = function() {
  text = $('.input').val();
  $('#text').text(text);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class='input'/>
<div id='text'>