Как создать асинхронную функцию в Javascript?

Question

Я имею в виду, проверить его это code:

<a href="#" id="link">Link</a> 
<span>Moving</span> 

$('#link').click(function() { 
    console.log("Enter"); 
    $('#link').animate({ width: 200 }, 2000, function() { 
     console.log("finished");    
    });  
    console.log("Exit");  
}); 

, как вы можете видеть в консоли, функция «одушевленные» является асинхронной, и «вилка» поток блочного кода обработчика событий. Фактически:

$('#link').click(function() { 
    console.log("Enter"); 
    asyncFunct(); 
    console.log("Exit");  
}); 

function asyncFunct() { 
    console.log("finished"); 
} 

следует за потоком блок-кода!

Если я хочу создать мой function asyncFunct() { } с таким поведением, как я могу это сделать с помощью javascript/jquery? Я думаю, что есть стратегия без использования setTimeout()

Answer 1

Вы не можете сделать по-настоящему индивидуальную асинхронную функцию. Вы в конце концов, придется использовать на технологии, представленной в естественном виде, например, как:

• setInterval
• setTimeout
• requestAnimationFrame
• XMLHttpRequest
• WebSocket
• Worker
• Некоторые HTML5 API, такие как API файлов, веб-базы данных е API
• технологии, которые поддерживают onload
• ... многие другие

В самом деле, для анимации JQuery usessetInterval.

Answer 2

Edit: Я совершенно не понял вопрос. В браузере я бы использовал setTimeout. Если было важно, чтобы он работал в другом потоке, я бы использовал Web Workers.

Answer 3

Вы можете использовать таймер:

setTimeout(yourFn, 0); 

(где yourFn является ссылка на вашу функцию)

или с underscore.js:

_.defer(yourFn); 

постановляет отложить вызов функции до текущий стек вызовов очищен, похож на использование setTimeout с del ay of 0. Полезно для выполнения дорогостоящих вычислений или рендеринга HTML в кусках без блокировки потока пользовательского интерфейса от обновления.

Answer 4

This page Просматривает основы создания функции async javascript.

Выполнения асинхронных вызовов функций в JavaScript, используя аргументы обычно включает Построив выражение аргумента SetTimeout или setInterval вручную.

Если это не поможет вам, ознакомьтесь с документацией по функции animate.

Answer 5

здесь у вас есть простое решение (другие пишут об этом) http://www.benlesh.com/2012/05/calling-javascript-function.html

И здесь у вас есть выше готовое решение:

function async(your_function, callback) { 
    setTimeout(function() { 
     your_function(); 
     if (callback) {callback();} 
    }, 0); 
} 

ТЕСТ 1 (может вывести '1 х 2 3' или ' 1 2 х 3' или '1 2 3 х'):

console.log(1); 
async(function() {console.log('x')}, null); 
console.log(2); 
console.log(3); 

ТЕСТ 2 (будет аль способы вывода «х 1»):

async(function() {console.log('x');}, function() {console.log(1);}); 

Эта функция выполняется с тайм-аутом 0 - это будет имитировать асинхронные задачи

Answer 6

Function.prototype.applyAsync = function(params, cb){ 
     var function_context = this; 
     setTimeout(function(){ 
      var val = function_context.apply(undefined, params); 
      if(cb) cb(val); 
     }, 0); 
} 

// usage 
var double = function(n){return 2*n;}; 
var display = function(){console.log(arguments); return undefined;}; 
double.applyAsync([3], display); 

Хотя принципиально не отличается от других решений, я думаю, что мое решение делает несколько дополнительных приятных вещей:

• позволяет параметров к функциям
• она проходит выходной функции обратного вызова к
• он добавляется к Function.prototype позволяя лучше способ назвать это

Кроме того, сходство с встроенной функцией Function.prototype.apply представляется целесообразным для меня.

Answer 7

MDN имеет good example об использовании setTimeout, сохраняя это «это».

Как следующее:

function doSomething() { 
    // use 'this' to handle the selected element here 
} 

$(".someSelector").each(function() { 
    setTimeout(doSomething.bind(this), 0); 
}); 

Answer 8

Если вы хотите использовать параметры и регулировать максимальное количество асинхронных функций, которые вы можете использовать простую асинхронную работник Я сборка:

var BackgroundWorker = function(maxTasks) { 
    this.maxTasks = maxTasks || 100; 
    this.runningTasks = 0; 
    this.taskQueue = []; 
}; 

/* runs an async task */ 
BackgroundWorker.prototype.runTask = function(task, delay, params) { 
    var self = this; 
    if(self.runningTasks >= self.maxTasks) { 
     self.taskQueue.push({ task: task, delay: delay, params: params}); 
    } else { 
     self.runningTasks += 1; 
     var runnable = function(params) { 
      try { 
       task(params); 
      } catch(err) { 
       console.log(err); 
      } 
      self.taskCompleted(); 
     } 
     // this approach uses current standards: 
     setTimeout(runnable, delay, params); 
    } 
} 

BackgroundWorker.prototype.taskCompleted = function() { 
    this.runningTasks -= 1; 

    // are any tasks waiting in queue? 
    if(this.taskQueue.length > 0) { 
     // it seems so! let's run it x) 
     var taskInfo = this.taskQueue.splice(0, 1)[0]; 
     this.runTask(taskInfo.task, taskInfo.delay, taskInfo.params); 
    } 
} 

Вы можете используйте его следующим образом:

var myFunction = function() { 
... 
} 
var myFunctionB = function() { 
... 
} 
var myParams = { name: "John" }; 

var bgworker = new BackgroundWorker(); 
bgworker.runTask(myFunction, 0, myParams); 
bgworker.runTask(myFunctionB, 0, null); 

Answer 9

Вот функция, которая принимает другую функцию и выходы версия, выполняющая async.

var async = function (func) { 
    return function() { 
    var args = arguments; 
    setTimeout(function() { 
     func.apply(this, args); 
    }, 0); 
    }; 
}; 

Он используется как простой способ сделать функцию асинхронной:

var anyncFunction = async(function (callback) { 
    doSomething(); 
    callback(); 
}); 

Это отличается от ответа @ Fider, потому что сама функция имеет свою собственную структуру (не обратный вызов не добавлен, это уже в функции), а также потому, что он создает новую функцию, которая может быть использована.

Answer 10

Я вижу здесь, что никто не говорил о обещании. Поэтому я рекомендую вам узнать о обещании: see this link

Answer 11

Рядом с отличным ответом от @pimvdb, и на всякий случай, когда вы задаетесь вопросом, async.js не предлагает действительно асинхронные функции. Вот (очень) урезанная версия основного метода библиотеки:

function asyncify(func) { // signature: func(array) 
    return function (array, callback) { 
     var result; 
     try { 
      result = func.apply(this, array); 
     } catch (e) { 
      return callback(e); 
     } 
     /* code ommited in case func returns a promise */ 
     callback(null, result); 
    }; 
} 

Таким образом, функция защищает от ошибок и корректно передает его в функцию обратного вызова для обработки, но код, как синхронные, как и любой другой функции JS.

Answer 12

К сожалению, JavaScript не предоставляет асинхронную функциональность. Он работает только в одном потоке. Но большинство современных браузеров предоставляют Workers, которые являются вторыми скриптами, которые выполняются в фоновом режиме и могут возвращать результат. Итак, я достиг решения, которое, как мне кажется, полезно для асинхронного запуска функции, которая создает рабочего для каждого асинхронного вызова.

Код, указанный ниже, содержит функциюasyncдля вызова фонового рисунка.

Function.prototype.async = function(callback) { 
    let blob = new Blob([ "self.addEventListener('message', function(e) { self.postMessage({ result: (" + this + ").apply(null, e.data) }); }, false);" ], { type: "text/javascript" }); 
    let worker = new Worker(window.URL.createObjectURL(blob)); 
    worker.addEventListener("message", function(e) { 
     this(e.data.result); 
    }.bind(callback), false); 
    return function() { 
     this.postMessage(Array.from(arguments)); 
    }.bind(worker); 
}; 

Это пример для использования:

(function(x) { 
    for (let i = 0; i < 999999999; i++) {} 
     return x * 2; 
}).async(function(result) { 
    alert(result); 
})(10); 

Это выполняет функцию, которая итерацию в for с огромным количеством, чтобы занять время как демонстрация асинхронности, а затем получает удвоенную пройденное число. Метод async предоставляет function, который вызывает нужную функцию в фоновом режиме и в том, что предоставляется как параметр async, вызывает обратный вызов return в его уникальном параметре. Итак, в функции обратного вызова I alert результат.

Answer 13

Поздно, но, чтобы показать простое решение с использованием promises после их введения в ES6, он обрабатывает асинхронные вызовы намного проще:

Вы установите асинхронный код в новом обещании:

var asyncFunct = new Promise(function(resolve, reject) { 
    $('#link').animate({ width: 200 }, 2000, function() { 
     console.log("finished");     
     resolve(); 
    });    
}); 

Примечание установить resolve() при завершении вызова асинхронного вызова.
Затем добавьте код, который вы хотите запустить после асинхронного вызова завершается в .then() обетовании:

asyncFunct.then((result) => { 
    console.log("Exit");  
}); 

Вот отрывок из него:

$('#link').click(function() { 
 
    console.log("Enter"); 
 
    var asyncFunct = new Promise(function(resolve, reject) { 
 
     $('#link').animate({ width: 200 }, 2000, function() { 
 
      console.log("finished");    \t 
 
      resolve(); 
 
     }); \t \t \t 
 
    }); 
 
    asyncFunct.then((result) => { 
 
     console.log("Exit");  
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" id="link">Link</a> 
 
<span>Moving</span>

или JSFiddle