Javascript'te nasıl Eşzamansız bir işlev oluşturabilirim?

Bu kodu inceleyin :

<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");    
});

Konsolda görebileceğiniz gibi, "canlandır" işlevi eşzamansızdır ve olay işleyici blok kodunun akışı "çatal" dır. Aslında :

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

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

blok kod akışını takip edin!

Benim function asyncFunct() { }bu davranış ile oluşturmak istiyorsanız , javascript / jquery ile nasıl yapabilirim? Ben kullanılmadan bir strateji olduğunu düşünüyorum setTimeout()

Gerçekten özel bir asenkron işlev yapamazsınız. Sonunda aşağıdakiler gibi yerel olarak sağlanan bir teknolojiden yararlanmanız gerekir:

• setInterval
• setTimeout
• requestAnimationFrame
• XMLHttpRequest
• WebSocket
• Worker
• Dosya API'sı, Web Veritabanı API'sı gibi bazı HTML5 API'leri
• Destekleyen teknolojiler onload
• ... diğerleri

Aslında, jQuery animasyon için kullanır setInterval .

Bir zamanlayıcı kullanabilirsiniz:

setTimeout( yourFn, 0 );

(nerede yourFn işlevinize bir referans )

veya Lodash ile :

_.defer( yourFn );

funcGeçerli çağrı yığını temizlenene kadar çağrıyı defers . Herhangi bir ek argüman funcçağrıldığında verilir.

burada basit bir çözümünüz var (diğer yazı hakkında) http://www.benlesh.com/2012/05/calling-javascript-function.html

Ve burada hazır çözümünüz var:

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

TEST 1 ( '1 x 2 3' veya '1 2 x 3' veya '1 2 3 x' çıktı alabilir ):

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

TEST 2 ( her zaman 'x 1' çıktısı verilir ):

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

Bu işlev zaman aşımı 0 ile yürütülür - zaman uyumsuz görevi simüle eder

İşte başka bir işlevi alan ve zaman uyumsuz çalışan bir sürüm çıktısı bir işlev.

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

Zaman uyumsuz bir işlev yapmanın basit bir yolu olarak kullanılır:

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

Bu, @ fider'ın cevabından farklıdır, çünkü işlevin kendi yapısı vardır (geri çağrı eklenmez, zaten fonksiyondadır) ve ayrıca kullanılabilecek yeni bir işlev oluşturur.

Edit: Soruyu tamamen yanlış anladım. Tarayıcıda kullanırdım setTimeout. Başka bir iş parçacığında koştu önemli olsaydı, Web İşçileri kullanırdım .

Geç oldu, ancak ES6'dapromises tanıtıldıktan sonra kolay bir çözüm göstermek için senkronize olmayan çağrıları çok daha kolay hallediyor :

Eşzamansız kodu yeni bir vaatte ayarlıyorsunuz:

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

resolve()Zaman uyumsuz çağrı bittiğinde ayarlanacağını unutmayın .
Sonra zaman uyumsuz çağrı bittikten sonra çalıştırmak istediğiniz kodu .then()sözün içine ekleyin :

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

İşte bir pasajı:

$('#link').click(function () {
    console.log("Enter");
    var asyncFunct = new Promise(function(resolve, reject) {
        $('#link').animate({ width: 200 }, 2000, function() {
            console.log("finished");            	
            resolve();
        }); 			
    });
    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>

veya JSFiddle

Bu sayfa zaman uyumsuz javascript işlevi oluşturmanın temelleri konusunda size yol gösterir.

ES2017'den bu yana, asenkron javacript işlevlerinin yazılması çok daha kolaydır. Ayrıca Promises hakkında daha fazla bilgi almalısınız .

Parametreleri kullanmak ve maksimum eşzamansız işlev sayısını düzenlemek istiyorsanız, oluşturduğum basit bir eşzamansız işçiyi kullanabilirsiniz:

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);
    }
}

Bu şekilde kullanabilirsiniz:

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

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

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);

Temel olarak diğer çözümlerden farklı olmasa da, çözümümün birkaç ek güzel şey yaptığını düşünüyorum:

• fonksiyonların parametrelerine izin verir
• işlevin çıktısını geri aramaya geçirir
• onu Function.prototypedaha güzel bir şekilde aramaya izin vermek için eklendi

Ayrıca, yerleşik işleve benzerlik Function.prototype.applybenim için uygun görünüyor.

@Pimvdb tarafından verilen büyük cevabın yanında, merak ediyorsanız, async.js de gerçekten asenkron işlevler sunmuyor. İşte kütüphanenin ana yönteminin (çok) soyulmuş bir versiyonu:

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);
    };
}

Böylece işlev hatalardan korur ve işlemek için geri aramaya incelikle verir, ancak kod diğer JS işlevleri kadar senkronizedir.

Ne yazık ki, JavaScript zaman uyumsuz bir işlev sağlamaz. Sadece tek bir iş parçacığında çalışır. Ancak modern tarayıcıların çoğu, arka planda yürütülen ve bir sonuç döndürebilen ikinci komut dosyaları olan Workers sağlar . Böylece, her zaman uyumsuz çağrı için bir işçi yaratan bir işlevi zaman uyumsuz olarak çalıştırmanın yararlı olduğunu düşünüyorum bir çözüme ulaştım.

Aşağıdaki kod , arka planda çağrılacak işlevi içerir 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);
};

Bu kullanım için bir örnektir:

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

Bu for, eşzamansızlığın bir gösterimi olarak zaman almak için çok sayıda yineleyen bir işlevi yürütür ve sonra geçen sayının iki katını alır. asyncYöntem sağlar function, arka planda istenen işlevini çağırır ve bu burada parametresi olarak sağlanan asyncgeri aramalar returneşsiz parametresinde. Yani geri arama işlevinde alertsonuç.

MDN'nin setTimeout kullanımı konusunda "this" korunmasına iyi bir örneği vardır .

Aşağıdaki gibi:

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

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