Thoughts from a 'spoof' Sort

background

Sort chance to see a spoof of the group in the technology. I looked at first glance that this is a spoof of sorting algorithms, but sorting algorithm spoof has given the right sort the results. I can not help but want to learn more about how it works.

Event Loop presentation

We know that JavaScript is single-threaded program is running, there is only one thread. JavaScript is a section of the single-threaded execution, execution over the front, the back and then executed. However, if you encounter a long time-consuming tasks, such as requesting the interface, I / O operations, this time behind the task If you have been waiting for, not only a waste of resources, and the page will be stuck, interaction is very poor. To solve this problem, JavaScript tasks will be divided into synchronous and asynchronous tasks, to be treated differently.

JavaScript, when executed, will be executed in an execution synchronization tasks ( Execution Stack context ), the execution order on the main thread, over the preceding task execution, and then executed later. Encountered asynchronous task does not stop and wait, but to suspend it, continue to perform the synchronization task of the current stack. When the asynchronous task has returned a result, the task execution result of the addition was complete the asynchronous task queue ( Task Queue ), typically are stored in the task queue after completion of the asynchronous callback function.

When the execution stack task is completed, the main thread will be free to read whether there are tasks in the task queue. If so, the main thread will be the first to enter the job task execution queue added to the stack after stack of task execution is completed, the main thread in turn will go to query task task queue, and read to the execution stack to do it. This process is iterative, this is the Event Loop , the event loop.

There is a widely circulated online map of this process are summarized:

, JavaScript The figure shows generated at runtime stack and heap, ajax, setTimeout other asynchronous tasks are suspended, is added to the result returned asynchronous tasks task queue, the main thread will cycle of the task reads the task queue, and execute added stack execution.

"Sort" Code Analysis

OK, I say so much, we finally see with this sort of relationship the algorithm keyword: setTimeout. As an asynchronous task, the process loops in the array, each based on the current value, the delay added to the task queue callback function, padding data into the new array. Since the value of the size of each small short delay time value, it will be first added to the job queue, using the Event Loop final time difference, to achieve the purpose of the sort.

Does not consider the issue of delay, purely from the point of view of code to complete the entire cycle again with just the sort, the time complexity of this sort of code is actually O (n) a. Point of view and from the current example: the sorting process, the same size of the data does not change before and after the sort order, the sorting algorithm is stable. We can even modify the code package to get sorted array via a callback:

function eventLoopSort(list, callback) {
  var newList = [];
  var sum = 0;
  list.forEach(item => {
    setTimeout(() => {
      newList.push(item);
    }, item * 100)
    sum += item;
  });
  setTimeout(() => {
    callback && callback(newList);
  }, sum * 100);
}

var list = [1, 1, 4, 6, 2, 3, 9, 8, 7];
eventLoopSort(list, data => {
  console.log(data) // [1, 1, 2, 3, 4, 6, 7, 8, 9]
})
复制代码

conclusion of issue

Seriousness talked about so much, or can not change this sort is a spoof, not apply to the actual code in reality. Because in the face of large amounts of data, in addition to setTimeout long delay, this sort or will go wrong. Considering the code itself is also a need to perform time-consuming, in the face of large amounts of data, the previous data to perform a long time, long time to offset the delay time difference, the sort will be completely wrong.

Finally, the first person to write this "joke" code, certain mechanisms browser running very understanding. This is what I want to express the meaning of this article, I hope through this spoof, interesting form, help you learn.

Reproduced in: https: //juejin.im/post/5d073524f265da1b5e72f3ca