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)
  • 相关阅读:
    在cmd命令行中弹出Windows对话框
    Windows远程桌面连接如何直接使用剪贴板功能
    升级Windows10后Apache服务器启动失败的解决方法
    Windows下尝试PHP7提示丢失VCRUNTIME140.DLL的问题解决
    手动构建Servlet项目的流程
    更改Apache默认网站根目录
    windows下安装Appserv等php套件之后无法进入数据库管理的问题
    Java web项目的字符集问题
    五谷-小米:白小米
    五谷-小米:黑小米
  • 原文地址:https://www.cnblogs.com/Answer1215/p/13915983.html
Copyright © 2011-2022 走看看