等待在Javascript中完成click事件

本文关键字：click 事件 Javascript 等待 | 更新日期: 2023-09-27 17:49:23

我有onClick事件在我的图像，导致新的选项卡被添加到jQuery选项卡。它旁边的事件将为这个新选项卡添加内容。

$('#Image').click();
$('#controladdedbyclickabove').append( message);

我看到的问题是，点击事件不会等待动作完成，它将继续下一个语句。由于这一点，我不能看到内容被添加到新的控件，点击将产生。如何使单击事件在移动到下一个语句之前等待操作完成?

我必须依赖于触发点击，因为#image上的onClick动作具有我可以提取为字符串的所有参数，但我不确定如何执行它。

当onClick事件发生时，这个方法被调用: 
function addTab(title, uri, userid) {
    var newTab = $("#tabs").tabs("add", uri, title);
}

等待在Javascript中完成click事件

你可以使用回调函数:

 if($('#Image')) {
  $('#Image').click(function() {
        $('#controladdedbyclickabove').append( message);
  });
}else {
  console.log('image object not there');
}

你不能等待事件被处理，因为它不会被处理，直到你退出你的函数，并将控制返回给浏览器。

要在事件处理后运行代码，需要在退出函数后启动它:

$('#Image').click();
window.setTimeout(function(){
  $('#controladdedbyclickabove').append( message);
}, 0);

有很多方法可以做到。你想在点击完成后执行一些操作

1:为什么不这样写呢

function addTab(title, uri, userid) {
   var newTab = $("#tabs").tabs("add", uri, title);
   $('#controladdedbyclickabove').append( message);
}

2:你也可以定义一个这样的函数

function addTabCallback () {
  $('#controladdedbyclickabove').append( message);
}
function addTab(title, uri, userid) {
   var newTab = $("#tabs").tabs("add", uri, title);
   addTabCallback();
}

3:你可以使用观察者模式

function addTab(title, uri, userid) {
   var newTab = $("#tabs").tabs("add", uri, title);
   var observer = addTab.observers.shift();
   while (observer) {
      observer();
      observer = addTab.observers.shift();
   }
}
addTab.observers = [];
当你触发点击 时

应该做一些改变

addTab.observers.push(function () {
   // codes here will be executed when the click finished
   $('#controladdedbyclickabove').append( message);
});
$('#Image').click();

这是一个带有观察者模式的示例代码，实际上，它应该做一些观察者类型检查等^_^.

最终将附加消息传递回ajax调用的服务器。因此，当click事件调用控件返回时，会在控件中添加消息。

相关文章：