尝试通过高级函数和回调访问HTML计算器

时间:2019-01-18 21:35:47

标签: javascript html dom

我一直在应对w3挑战,我认为我可以比他们提供的解决方案更好地编写解决方案。

我想遵守DRY原则,所以我创建了一个用于除法的回调函数和一个用于相乘的回调函数,并将该原理函数设为每个回调函数的HOF。但是,由于某种原因,它不起作用,也不会引发错误。我已经审查了我的代码,到目前为止还没有解决它的运气。

在理想情况下,HTML输入将乘以代码或除以代码。然而,什么都没有发生。

有什么想法吗?

import java.util.PriorityQueue;
import java.util.Queue;
import java.util.concurrent.CountDownLatch;
import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;

/** Testing CountDownLatch and ExecutorService to manage scenario where
 * multiple Threads work together to complete tasks from a single
 * resource provider, so the processing can be faster. */
public class ThreadCountDown {

private CountDownLatch threadsCountdown = null;
private static Queue<Integer> tasks = new PriorityQueue<>();

public static void main(String[] args) {
    // Create a queue with "Tasks"
    int numberOfTasks = 2000;
    while(numberOfTasks-- > 0) {
        tasks.add(numberOfTasks);
    }

    // Initiate Processing of Tasks
    ThreadCountDown main = new ThreadCountDown();
    main.process(tasks);
}

/* Receiving the Tasks to process, and creating multiple Threads
* to process in parallel. */
private void process(Queue<Integer> tasks) {
    int numberOfThreads = getNumberOfThreadsRequired(tasks.size());
    threadsCountdown = new CountDownLatch(numberOfThreads);
    ExecutorService threadExecutor = Executors.newFixedThreadPool(numberOfThreads);

    //Initialize each Thread
    while(numberOfThreads-- > 0) {
        System.out.println("Initializing Thread: "+numberOfThreads);
        threadExecutor.execute(new MyThread("Thread "+numberOfThreads));
    }

    try {
        //Shutdown the Executor, so it cannot receive more Threads.
        threadExecutor.shutdown();
        threadsCountdown.await();
        System.out.println("ALL THREADS COMPLETED!");
        //continue With Some Other Process Here
    } catch (InterruptedException ex) {
        ex.printStackTrace();
    }
}

/* Determine the number of Threads to create */
private int getNumberOfThreadsRequired(int size) {
    int threshold = 100;
    int threads = size / threshold;
    if( size > (threads*threshold) ){
        threads++;
    }
    return threads;
}

/* Task Provider. All Threads will get their task from here */
private synchronized static Integer getTask(){
    return tasks.poll();
}

/* The Threads will get Tasks and process them, while still available.
* When no more tasks available, the thread will complete and reduce the threadsCountdown */
private class MyThread implements Runnable {

    private String threadName;

    protected MyThread(String threadName) {
        super();
        this.threadName = threadName;
    }

    @Override
    public void run() {
        Integer task;
        try{
            //Check in the Task pool if anything pending to process
            while( (task = getTask()) != null ){
                processTask(task);
            }
        }catch (Exception ex){
            ex.printStackTrace();
        }finally {
            /*Reduce count when no more tasks to process. Eventually all
            Threads will end-up here, reducing the count to 0, allowing
            the flow to continue after threadsCountdown.await(); */
            threadsCountdown.countDown();
        }
    }

    private void processTask(Integer task){
        try{
            System.out.println(this.threadName+" is Working on Task: "+ task);
        }catch (Exception ex){
            ex.printStackTrace();
        }
    }
}
}
var userMultiply = function() {
  document.getElementById("result").innerHTML = num1 * num2;
}

var userDivide = function() {
  document.getElementById("result").innerHTML = num1 / num2;
}

function userMaths(callBack) {
  let num1 = document.getElementById('firstNumber').value;
  let num2 = document.getElementById('secondNumber').value;
}

1 个答案:

答案 0 :(得分:4)

几个问题:

  1. 您永远不会调用回调。
  2. 变量num1num2userMaths中的局部变量,无法从userMultiplyuserDivide访问它们。您应该将它们作为参数传递。

您还应该使用parseFloat()将输入转换为数字。像*/这样的运算符会自动执行此操作,但是添加userAdd时会遇到问题,因为+会进行字符串连接而不是附加。

您可能还希望将显示结果的代码移到userMaths中,因为所有操作都相同。

var userMultiply = function(num1, num2) {
  return num1 * num2;
}

var userDivide = function(num1, num2) {
  return num1 / num2;
}

function userMaths(callBack) {
  let num1 = parseFloat(document.getElementById('firstNumber').value);
  let num2 = parseFloat(document.getElementById('secondNumber').value);
  document.getElementById("result").innerHTML = callBack(num1, num2);
}
<form>
  1st Number : <input type="text" id="firstNumber" /><br> 2nd Number: <input type="text" id="secondNumber" /><br>
  <input type="button" onClick="userMaths(userMultiply)" Value="Multiply" />
  <input type="button" onClick="userMaths(userDivide)" Value="Divide" />
  <p>The result is: </p>
  <span id="result"></span>
</form>