zoukankan      html  css  js  c++  java
  • [Functional Programming] Building a Timer UI by Composing Callbacks

    Controlling when a broadcaster starts and stops gives you complete control over your broadcasters. This let's you hook multiple pieces of UI together to offer to the user and allow them to manage the behaviors of your application. This lesson walks through creating a timer using a startWhen and a stopWhen operator which are hooked into buttons.

    Think of some other scenarios where have beginnings and ends controlled by events. For example, a mouse drag that starts with a mouse down and ends with a mouse up

    import { curry, pipe } from "ramda";
    
    document.getElementById("app").innerHTML = `
    <h1>Hello Parcel!</h1>
    <div>
      <button id="start">Start</button>
      <button id="stop">Stop</button>
    </div>
    `;
    
    const addListener = (selector, eventType) => (listener) => {
      const element = document.querySelector(selector);
      element.addEventListener(eventType, listener);
      return () => {
        element.removeEventListener(eventType, listener);
      };
    };
    const createInterval = curry((time, listener) => {
      let i = 0;
      const id = setInterval(() => {
        listener(i++);
      }, time);
      return () => {
        clearInterval(id);
      };
    });
    
    let startClick = addListener("#start", "click");
    let stopClick = addListener("#stop", "click");
    
    let timer = createInterval(100);
    
    // A event happen to trigger B event
    let startWhen = (whenBroadcaster) => (mainBroadcaster) => (listener) => {
      let cancelMain;
      let cancelWhen;
    
      cancelWhen = whenBroadcaster((whenValue) => {
        if (cancelMain) cancelMain();
        cancelMain = mainBroadcaster((value) => {
    if (value === done) {
          if (whenValue === done) {
        
            listener(done);
          }
         return
        }
        listener(value) }); });
    return () => { cancelMain(); cancelWhen(); }; }; let stopWhen = (whenBroadcaster) => (mainBroadcaster) => (listener) => { let cancelMain = mainBroadcaster(listener); let cancelWhen = whenBroadcaster((value) => { cancelMain(); }); return () => { cancelMain(); cancelWhen(); }; }; const operators = pipe(stopWhen(stopClick), startWhen(startClick)); operators(timer)(console.log); // startWhen(startClick)(stopWhen(stopClick)(timer)) (console.log)
  • 相关阅读:
    【USACO】clocks 遇到各种问题 最后还是参考别人的思路
    【USACO】calfflac
    【USACO】namenum
    【USACO】beads
    最大流问题
    模运算性质 摘自百度百科
    学历是铜牌,能力是银牌,人脉是金牌,思维是王牌
    U盘版Windows 10已经在亚马逊Amazon開始接受预订啦
    hadoop实验:求气象数据的最低温度
    Appium Android Bootstrap源代码分析之启动执行
  • 原文地址:https://www.cnblogs.com/Answer1215/p/13915983.html
Copyright © 2011-2022 走看看